Running YouTube videos in a monitor frame in Divi

Please note, this tutorial was created with Divi 2.3, thus it might not work properly with Divi 2.4 and later versions. You can find the 2.4+ version 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 in CSS 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.

video-frame-row

The Section has the monitor image set as background image.

The Section has the CSS class video-frame

The first column has a Divider module.

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

The third column is empty.

You can find the needed CSS code below. It should work in most recent browsers is responsive.

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.

@media only screen and ( min-width: 981px ) {
	.video-frame {
		background-position: center 58px;
		background-size: 888px 466px;
		height: 466px;
	}
}

/*-------------------[960px]------------------*/
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {
	.video-frame {
		background-position: center 60px;
		background-size: 788px 413px;
		height: 466px;
	}
}

/*-------------------[768px]------------------*/
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
	.video-frame {
		background-position: center 79px;
		background-size: 1206px 633px;
		height: 712px;
	}	
}

/*-------------------[480px]------------------*/
@media only screen and ( max-width: 767px ) {
	.video-frame {
		background-position: center 92px;
		background-size: 700px 367px;
		height: 406px;
	}
}

/*-------------------[320px]------------------*/
@media only screen and ( max-width: 479px ) {
	.video-frame {
		background-position: center 98px;
		background-size: 490px 257px;
		height: 304px;
	}
}

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

.video-frame { 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.