YouTube Responsive Video for phpBB 3.1

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The next feature release of phpBB 3 will be 3.2/Rhea followed by 3.3.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.1. If you need support for phpBB 3.1 please visit the 3.1.x Support Forum on phpbb.com.

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

YouTube Responsive Video for phpBB 3.1

Post by mrgtb » Tue Apr 15, 2014 5:42 pm

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]

Post Reply