Responsive Video Suite
Create stunning full-width video with your favorite video clips and your choice of 30 different pattern overlays.
Designed to run short, looped video running in the background, this widget will surely capture attention by adding dynamic content at the top of your page.
- For optimal results, you'll need to convert your video to .mp4, .webm and .ogv formats, and be sure to have a still image in case your site visitors are using a browser that doesn't support video.
- Be sure to keep your files as small as possible -- absolutely no larger than 5mb -- to ensure quick loading.
- The video will always render at 100% width.
- Choose "Fit to 100% Height" in the Video Fitting option to display the entire height of the video
- Choose "Fit to Container Height" in the Video Fitting option to display the video at 100% width of the screen (regardless of the size of the widget container) but only the height of the container. For example, if you have the widget container stretched to 100px-W by 300px-H, the video will publish at 100% width of the screen, but only 300px high from the header down.
- This widget adds the video to the top of your page (under the header), regardless of where you place the widget container. If you notice the top of the video is not at the top of your browser window, you can adjust the video up or down using the Adjust for Header option.
- You can adjust layering of the video by setting the Send Backward/Forward option up or down.
- With version 1.33 and higher, you can set the video to either scroll as any other element, or you can set the position to "Fixed" so the video remains stationary while other content scrolls over it.
Here are some live previews of the background video in use:
Need some videos? Check out Fancy Footage Club for beautiful, royalty-free looping videos that are formatted perfectly for our 100% Width Video widget!
I am having some issues with the 100% width video widget.
There is a white box covering the video at all times, positioned in the center. Wen I inspect the element, I believe it is “clearfix” - not sure if that’s the one.
I hid all other elements from my muse page, leaving just the video, to make sure there’s nothing else covering it.
This is a common thing, and you'll be happy to know, a quick fix.
What you see.
The box you see is the canvas fill color. If you de-select everything on your page, in the options at the top of Muse, you'll see a "fill" option for your page. This is the white box you see.
You can de-select everything on your page, which will leave the page fill selected (odd, I know), and then you can change the fill color to "transparent" as seen in the image above..
In the widget, there is an option to "Send forward/backward" in relation to other elements on your page. Adjust the value accordingly until it is positioned where you'd like it.
You'll want to test both options thoroughly to make sure everything on your page falls where you want. And if it doesn't let me know and I'll see if I can help.