YouTube Responsive Video for phpBB 3.1

[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: http://apiblog.youtube.com/2010/07/new- ... 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

[youtube]{SIMPLETEXT}[/youtube]

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="http://www.youtube.com/embed/{SIMPLETEXT}" style="border: none;" allowfullscreen></iframe>
</div>
</div>

Help line

Code: Select all

Youtube video: [youtube]INmtQXUXez8[/youtube]