Add a Fullscreen Background Video to your Adobe Muse Website. No Coding Skills Required.
One question I get asked a lot is “Why is my fullscreen video not playing on my tablet and mobile device?” The answer to this question is that tablet and mobile devices do not automatically play video without a play button. This has to do with the fact that many users on a mobile device are on their data plan and if the video plays automatically it uses quite a bit of data as a video is larger than an image or plain text. That is why I decided to release the “Responsive Fullscreen Video” widget. With this widget the video plays automatically on a desktop computer, and once it reaches the size of a tablet or mobile device a play button appears. This gives the user the option to play the video by pressing the play button.
I recently released a new update that allows you to have the fullscreen video fixed in the background, or appear above the website before the user scrolls. You can now also add your own custom play and pause button.
The steps to add a fullscreen video are as follows:
1. Install the widget by clicking on the .mulib file. The widget then installs into the library panel in Adobe Muse.
2. Drag and drop the widget onto your Adobe Muse website from the library panel. If you do not see the library panel go to Window > Library.
3. Add your video in the “Video” section of the widget options. It is recommended to add at least a .mp4 video and a poster image. Most browsers now support .mp4 video.
4. Select wether you would like the video to be fixed in the background or appear as a cover video before the user scrolls by checking or unchecking the “Fixed in Browser” option.
5. There is the option to add an overlay color or pattern within the “Overlay” section.
6. In the “Play Button” section you can enable the play button by selecting the option “Enable Play Button on Tablet and Mobile.” You can then add your custom play and pause button and set the size of the button within the widget options. You can also re-position the play button vertically within the video. There is also the option to set at what breakpoint the play button will appear.
7. In the “Options” section you can enable or disable autoplay, loop, mute, and video re-sizing.
8. The “Breakpoint” section allows you to disable the entire video at a certain breakpoint.
9. Done! You now have a responsive fullscreen video on your Adobe Muse website.
Visit http://museforyoushop.com for more video tutorials and widgets for Adobe Muse.
Happy Musing :).
Leave a Reply