How to Add an HTML5 Video Player with Lightbox in Adobe Muse

How to Add an HTML5 Video Player with Lightbox in Adobe Muse. No Coding Skills Required.

  

Video is becoming our main way of consuming information. It is most evident with YouTube as 300 hours of video are uploaded to YouTube every minute and almost 5 billion videos are watched on YouTube everyday! That is a staggering number, and it is no wonder I often get requests for video widgets.

YouTube makes it really easy to add video from YouTube to your website and Muse even has a built-in widget that allows you to do this, but what if you wanted to add your own video without going through YouTube?

That is where the HTML5 Video Player with Lightbox widget comes into play. With this widget you can upload your own mp4 video to your website without having to go through third party video hosting like YouTube or Vimeo. The video can be watched directly from your server. Not only that you can also open the video in a Lightbox display giving the user a more direct experience of watching the video without any information surrounding the video. Many users prefer hosting their own video as this means no ads or related videos at the end. The HTML5 Video Player with Lightbox also comes with a YouTube player in case you wanted to add YouTube video as well.

Here are the steps to adding the HTML5 Video Player with Lightbox to your Adobe Muse website:

1. Double click the .mulib file to install.

2. Drag and drop an “Add First” widget from the Library Panel and place at the top of your Adobe Muse website. If you do not see the Library Panel go to Window > Library.

You can choose from the following “Add First” widgets:

– HTML5 Video Player – Add First – For Video Players.

– HTML5 Video Player – Add First – With Lightbox – For Video Players and Video Players within a Lightbox. You can add a color with an opacity or an image for the Lightbox background.

– HTML5 Video Player – Add First – With Gradient Lightbox – For Video Player and Video Players within a Lightbox. You can add a gradient with 2 colors for the Lightbox background.

3. Place a video player widget onto your website. You can choose from the following video player widgets:

– HTML5 Video Player Widget

– HTML5 Video Player Widget – Lightbox

– YouTube Video Player Widget

– YouTube Video Player Widget – Lightbox

The Lightbox widgets open the video within a Lightbox. Depending on the “Add First” widget added you can set the Lightbox background to be a color, image, or gradient. You can set the opacity of the color and image with the Lightbox background.

4. For the HTML5 Video Players it is recommended to add at least a .mp4 file for video. You can add a .webm and .ogv file for fallback support on browsers that do not support .mp4. Most browsers support .mp4.

5. Add a poster image so when the video is not playing an image will show, and then the user can press the play button.

6. Set the theme of the video player to default, dark, or light.

7. You can set the width and height of the video within the widget options. There is a 16:9 Aspect Ratio calculator within the widget. You can also set the video to autoplay, loop, and the initial volume. You can set the video to overscale within the Lightbox, meaning the video will get larger then the size set within the widget when the browser is resized.

8. Done!

 

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Happy Musing!

Read More at How to Add an HTML5 Video Player with Lightbox in Adobe Muse

from Web Design Ledger https://webdesignledger.com/how-to-add-an-html5-video-player-with-lightbox-in-adobe-muse/