Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Have you ever wanted one of your videos to display as if it was playing on a laptop or desktop PC monitor? It’s easy using the Divi Code Module and just a little CSS.

You can check out the demo here. 

 

Lets Get Started

1. Create a regular section, single column row and a Code Module.

002

 

2. I did not want the laptop to fill the whole page. So I added a little left and right padding to the row. Open row settings and change the left and right padding to 15% for desktop, 5% for tablets and 0 for mobile..

003

 

3. Now going back into the Code module settings you are going to add this html. Substitute the src with your YouTube video url. You might also need to adjust the height and width a little depending on the background image you end up using.

 



<div id="video-laptop" > <iframe width="560" height="390" src="https://www.youtube.com/embed/S_QemrZbOIk" frameborder="0" allowfullscreen></iframe> </div>


 

Now save and update page.

 

 

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)


/*------------------------------------------------*/
/*------------------------------------------------*/
/*--------------[VIDEO ON LAPTOP]-----------------*/
/*--------------[BY GENO QUIROZ]------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/


#video-laptop {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;}

#video-laptop iframe {
    box-sizing: border-box;
    background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat;
    background-size: contain;
    padding: 11.9% 15.5% 14.8%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}


 

You can substitute the background device image with your own by changing the url in the background above. You may have to adjust padding depending on the dimensions of the device and where on the image the video needs to display. The image used in this tutorial is 1034×543.

And that’s it! Have fun!

Credit: JSFiddle


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest