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

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.)

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%

: Row General Settings

: Row Advanced Design Settings

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:

www.theultimatewebmaster.com

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.