Tutorial: Making embedded YouTube videos responsive

Selene310187 · Post by **Selene310187** » Mon Feb 06, 2023 9:30 pm

The videos of the board are embedded via the custom YouTube BBCode of the Opt-In Cookie Manager extension for phpBB. If you are looking for a general solution, you find useful hints here.

Skip to the solution for the Opt-In Cookie Manager extension

This extension is great if you want to make the embedded YouTube videos of your phpBB board compliant with the GDPR (or similar regulations). But the videos that are embedded via the custom YouTube BBCode are not entirely responsive on mobile devices which means it's possible that things are cut off.

My previous workaround was using the CSS @media rule to set the width and height of the video for different screen resolutions. This mitigated most of the issue, however on some screens it could still happen. Today, I finally found a solution that works for all screen resolutions - the aspect-ratio property! I received the final hint from this site.

All I needed to do, was modifying the youtube_bbcode_switch_on.css which you can find under ext\chris1278\cookie\styles\all\theme.

Open the file, delete the entire code and replace it with my modified version:

Code: Select all

/* These CSS settings are used for the info box that is displayed when the Youtube switch is set to false but a video is embedded in the post with the BBcode. */
.yt_video_switch_false {
	display: none
}

/* These CSS settings are used to format the video that is displayed. */
.yt_video_layer {
	max-width: 600px;
	max-height: 345px;
	padding-bottom: 40px;
}

.yt_video_layer iframe, .yt_video_layer object, .yt_ideo_layer embed {
	position: relative;
	width: 100%;
	height: unset;
	aspect-ratio: 16/9;
}

Save the file and purge the cache of your board (otherwise the changes won't take effect).

Here's an embedded video for testing:

A video from YouTube usually appears here. Please contact an administrator.

If you don't have a mobile device at hand, open up the Developer Tools of your browser and play around with different screen resolutions:
Chrome/Opera
Firefox