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.


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!