Running YouTube videos in a monitor frame in Divi 2.4.x

by Andras Guseo | The divi magazine © 2015

Please note, this tutorial was created with Divi 2.4.x using the updated functionalities of the Page Builder. If you are looking for the implementation for Divi 2.3 and before, then check out the legacy example here.

Introduction

This example shows a YouTube video in a Video module in Divi, surrounded by a monitor frame.

Although this example is created specifically for the video that you see here, it should give you an idea on how to adjust the dimensions to any type of frame if needed.

You can download the monitor frame used in this example here.

Setup

This example uses a normal Section with a 1/2/1 column split. You will only need to add a Video module in the middle. (In Divi 2.3 you also needed a Divider in the 1st column but now you can skip that. Actually it ruins it.)

monitor-frame-section

The Section has the CSS class set: monitor-frame

The Row has:

  • a custom gutter width set to 1
  • the monitor image set as background image for the 2nd column with
  • custom padding values 2%, 2%, 14%, 2%

The second (wide) column has a Video module with the link to the YouTube video.

 

And you need to add a bit of CSS in your ePanel to make it look nice on mobile as well. You can find the needed CSS code below. Note: this assumes that mobile view settings in Divi has not been changed from the default.

The solution is already used at:

Do you want to showcase the solution on your site?

Contact me

The CSS for creating a monitor frame in Divi

This is the code you need to insert into your theme’s style.css file (Appearance > Editor) or into the Appearance > Divi Theme Settings > General > Custom CSS box.

.monitor-frame .et_pb_column {
    background-position: center top;
}
@media only screen and ( max-width: 980px ) {
    .monitor-frame .et_pb_column:nth-child(2) {
        padding-bottom: 28%;
    }
}

If by chance you want to remove the background totally on small screens, then just put this in the section starting with @media:

.monitor-frame .et_pb_column_2 { background-image: none; }

May the Force be with you! 🙂

Need help?

If you need some help in implementing it or you need some adjustments that you are either afraid to do, or don’t know how to do it, then drop me a line.

And please like / share this page if you liked it. :)

 

3 + 2 =

css.php
Share This

If you liked this post ...

... then share it with your friends!