How to use the widget and add content below the fullscreen video cover?

01

If you would like to have some content over the fullscreen video, as in the example above, it is advised to use our Browser Centering Widget with the Responsive Fullscreen Video Widget.

If you would like to have some content below the video, the distance of the content from the video is determined by the distance of the content from the top of the website.

For example, if you want your page content to be at a distance of 160px from the video, as in this example, you should put it at a distance of 160px from the top, that is, Y = 160px

There are 2 widgets included with the Responsive Fullscreen Video Widget. They are:

  • Responsive Fullscreen Video Widget
  • Responsive Fullscreen Video Widget - External URL

Drag the 'Responsive Fullscreen Video' widget and place onto your Adobe Muse website. It can be placed off-canvas.

Open widget options. In 'Video' section, add the video files and a poster image

  • Most browsers support .mp4 so it is recommended to add at least a .mp4 file for video. You can add a .webm file for fallback support on browsers that do not support .mp4 video files.
  • Poster image is for tablet or mobile devices that require user input to play video.

If you would like your video to have a color or mesh overlay, enable that option in 'Overlay' section within widget options. The example above has both the color overlay (#4d16dd with 0.7 opacity) and the mesh overlay. Visit http://patternify.com to create a mesh overlay. Once the mesh overlay is created you can copy the base64 code from patternify.com and paste into the widget.

Welcome to the Responsive Fullscreen Video Widget 1.3

This widget allows you to add a fullscreen video background that works across all breakpoints. A play button also appears on tablet and mobile devices to allow the video to be played on those devices.

Back to Shop

SAMPLES

Make Better Websites, Starting Today.

All access pass for only $49/year.

Have questions about our products?

We are here to help.

Tutorials