YouTube Responsive Video for phpBB 3.1

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
Post Reply
Registered User
Posts: 221
Joined: Wed Nov 28, 2007 10:09 pm

YouTube Responsive Video for phpBB 3.1

Post by mrgtb »

This is how you can add Responsive YouTube BBCode video to phpBB 3.1, which uses a new responsive style now. The newer YouTube iFrame code was used from this page to read more about it with HTML5: ... ideos.html

You can change the size of the video displayed at full-size by editing the class ".video-wrapper" and change "width: 640px" to a smaller number like 560px.

In the ProSilver CSS file called: styles/prosilver/theme/common.css. At this code at the very bottom of it (don't forget you need to re-cache themes afterwards):

Code: Select all

/* Custom styles
---------------------------------------- */
.video-wrapper {
	width: 640px;
	max-width: 100%;

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
Now add a new BBCode using these settings below:

BBCode usage

Code: Select all

HTML replacement

Code: Select all

<div class="video-wrapper">
<div class="video-container">
<iframe class="youtube-player" type="text/html" width="640" height="385" src="{SIMPLETEXT}" style="border: none;" allowfullscreen></iframe>
Help line

Code: Select all

Youtube video: [youtube]INmtQXUXez8[/youtube]

Post Reply