Autoplay Lightbox Video on Button Click

Support
#1

I would like my video to autoplay when the “Learn More” button in top banner of my page is clicked, but it seems like all of the documentation I have found to complete this is outdated.

The Lightbox is working, but the video doesn’t start automatically and it fills the entire screen. Here is the link to the page on my dev site: http://52.10.233.244/hr-on-demand-consulting-outsourcing/

Ideally I would like the video to mimic the display of the video on this page (also the “Learn More” button on the top banner): https://www.hrunlimitedinc.com/hr-on-demand-consulting-outsourcing/

  • Transparent background
  • Small display with option to go to fullscreen
  • Autoplay

The most important feature is that the video autoplays, but help on any of the above would be appreciated. Thanks in advance!

Annmarie

#2

Hi Annmarie,

Thank you for writing in, there is one solution that will solve your modal video issues, and that is to use the Content Area Modal element instead of lightbox shortcode.

With the Content Area Modal you can customize the toggle (button) and the modal (lightbox).

Then add your HTML 5 video in the Content.

Add the attribute autoplay to your <video> tag so the video will be auto-played.

https://www.w3schools.com/tags/att_video_autoplay.asp

Also, set the width and height attribute to 100% and auto respectively to make your video responsive to the modal width.

e.g.

<video width="100%" height="auto">

Lastly, make sure you enable the Dynamic Rendering option on the Content Area Modal element, so the video won’t autoplay before the toggle/button is clicked on.

Hope it helps,
Cheers!

#3

Thank you! This worked perfectly.

#4

@thompsonsgg,

It’s our pleasure to help you.

Thank you.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.