Warning: Use of undefined constant _adsense_inserter - assumed '_adsense_inserter' (this will throw an Error in a future version of PHP) in /home/customer/www/thinklandingpages.com/public_html/wp-content/plugins/adsense-inserter/settings.php on line 86

Warning: Use of undefined constant _marketing_magnet - assumed '_marketing_magnet' (this will throw an Error in a future version of PHP) in /home/customer/www/thinklandingpages.com/public_html/wp-content/plugins/marketing-magnet/settings.php on line 142

Warning: Use of undefined constant _popup_express - assumed '_popup_express' (this will throw an Error in a future version of PHP) in /home/customer/www/thinklandingpages.com/public_html/wp-content/plugins/popup-express-pro/settings.php on line 312

Warning: Use of undefined constant _pricingTableDynamite - assumed '_pricingTableDynamite' (this will throw an Error in a future version of PHP) in /home/customer/www/thinklandingpages.com/public_html/wp-content/plugins/pricing-table-dynamite-pro/settings.php on line 131
Landing Page with Html5 Video as a Background | Think Landing Pages

Landing Page with Html5 Video as a Background

To place an Html5 video in the center of a landing page and possibly use it as the background you have to structure your content a certain way and put a little css code on the page.

Make the background of your web page a video
It is not possible at this time to make the actual background of body tag a video. But you can make your video fill the entire screen and position it behind everything. This will make the video the background of your web page.

Place the code in the box below inside one Content Area 1

<video autoplay loop id="myvideo">
 <source src="http://www.yoursite.com/thevideo.mp4" type="video/mp4">
</video>

Then, put the code below in the Custom Code box of your landing page.

<style>
video#myvideo { 
   position: fixed; right: 0; bottom: 0;
   min-width: 100%; min-height: 100%;
   width: auto; height: auto; z-index: -100;
   background: url(polina.jpg) no-repeat;
   background-size: cover; 
}
</style>

Checkout this link to see an in depth tutorial on using a video as your web page’s background.

Make a video the background of a div
In your content area, say Content Area 1, you would put the following code, replacing the video url with your url.

<div id="backgroundVideo">
<video controls>
  <source src="http://www.yoursite.com/thevideo.mp4" type="video/mp4">
</video>
</div>

Then, put the code below in the Custom Code box of your landing page.

<style>

#backgroundVideo{
   margin:0 auto;
   width:100%;
}

video{
    max-width:100% !important;
    height:auto;
    display:block;
}

</style>

Finally, publish or save as draft and preview.

Posted in Landing Pages, Tutorial, Video Landing Pages
How To Get 4,692 Subscribers
The step-by-step guide to more conversions
  • The one thing you must do to get subscribers
  • How to find the traffic that converts more than any other traffic
  • What to include in your auto responsder to keep 'em subscribed
  • The exact method I use to skyrocket my email list to more than 4692 subscribers

Download Now