YouTube Responsive video for phpBB

Forum used for listing all public lounge discussions.

Moderator: Super Moderators

User avatar
It's Me
Forum Administrator
Forum Administrator
Posts: 259
Joined: Tue Jun 28, 2016 12:12 pm

YouTube Responsive video for phpBB

Unread postby It's Me » Tue Dec 06, 2016 5:51 pm

How to add YouTube Responsive video for phpBB 3.1 and 3.2, this also passes W3C validation.

Open File: styles/prosilver/theme/common.css

Add this CSS code at very bottom. Don't forget, you need clear all CACHE afterwards via Admin CP after uploading the CSS file with these extra changes included.

Code: Select all

/* Custom youtube video
---------------------------------------- */

.video-wrapper {
   width: 640px;
   max-width: 100%;
   margin-top: 5px;
   margin-bottom: 5px;
}

.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 you can add a new BBCODE to phpBB using this below for the YouTube Video player.

BBCode usage:

Code: Select all

[youtube]{SIMPLETEXT}[/youtube]


HTML replacement:

Code: Select all

<div class="video-wrapper"><div class="video-container"><iframe width="640" height="360" src="https://www.youtube.com/embed/{SIMPLETEXT}" style="border: none;" allowfullscreen></iframe></div></div>


Help line:

Code: Select all

Youtube video: [youtube]yxx1LJLl0Kw[/youtube]

User avatar
It's Me
Forum Administrator
Forum Administrator
Posts: 259
Joined: Tue Jun 28, 2016 12:12 pm

Re: YouTube Responsive video for phpBB

Unread postby It's Me » Mon Dec 19, 2016 11:46 am

By default "Annotations" (which looks like subtitled text displayed in videos) with YouTube are Turned On. If you want to turn them off by default not being shown. Use this code below for the YouTube URL part.

Code: Select all

src="https://www.youtube.com/embed/{SIMPLETEXT}?iv_load_policy=3"



This bit was added extra at the end of the URL:

Code: Select all

?iv_load_policy=3


Who is online

Users browsing this forum: No registered users and 0 guests