Modding on the Spectrum

/* 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;
}

The videos of the board are embedded via the custom YouTube BBCode of the [url=https://www.phpbb.com/customise/db/extension/opt_in_cookie_manager/]Opt-In Cookie Manager[/url] extension for phpBB. If you are looking for a general solution, you find useful hints [url=https://dev.to/deammer/embed-responsive-youtube-videos-in-2021-5dkh]here[/url].

[goto=All I needed to do]Skip to the solution for the Opt-In Cookie Manager extension[/goto]


This extension is great if you want to make the embedded YouTube videos of your phpBB board compliant with the [url=https://en.wikipedia.org/wiki/General_Data_Protection_Regulation]GDPR[/url] (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 [url=https://www.w3schools.com/cssref/css3_pr_mediaquery.php]@media[/url] 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 [url=https://www.w3schools.com/cssref/css_pr_aspect-ratio.php]aspect-ratio[/url] property! I received the final hint from [url=https://dev.to/deammer/embed-responsive-youtube-videos-in-2021-5dkh]this site[/url].



[anchor]All I needed to do[/anchor], was modifying the [b][color=#BFFFFF]youtube_bbcode_switch_on.css[/color][/b] which you can find under [i]ext\chris1278\cookie\styles\all\theme[/i].

Open the file, delete the entire code and replace it with my modified version:
[code]/* 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;
}
[/code]

Save the file and [b][color=#BFFFFF]purge the cache of your board[/color][/b] (otherwise the changes won't take effect).


Here's an embedded video for testing:
[youtube]https://www.youtube.com/watch?v=PSrO55KS6VY[/youtube]

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:
[url=https://docs.inductiveautomation.com/display/DOC80/Test+Your+Responsive+Design+Using+Chrome%27s+Developer+Tools]Chrome/Opera[/url]
[url=https://forums.ivanti.com/s/article/Toggle-different-resolutions-within-a-Mozilla-Firefox-session-in-order-to-simulate-different-devices-for-example-for-testing-GoldMine-Web-for-responsive-designs-on-various-resolutions?language=en_US]Firefox[/url]