How can I make bbcode youtube video responsive and lazyload ?

[forforce]

Hi, now I have this code to show youtube videos in my posts:

BBcode

Code: Select all

[youtube]{IDENTIFIER}://{SIMPLETEXT1}youtube.com/watch?v={SIMPLETEXT2}[/youtube]

HTML

Code: Select all

<center><object width="640" height="480"><param name="movie" value="{IDENTIFIER}://{SIMPLETEXT1}youtube.com/v/{SIMPLETEXT2}"></param><param name="wmode" value="transparent"></param><embed src="{IDENTIFIER}://{SIMPLETEXT1}youtube.com/v/{SIMPLETEXT2}" type="application/x-shockwave-flash" wmode="transparent" allowFullScreen="true" width="640" height="480"></embed></object></center>

All seems to be just fine on desktop but on mobile the video is not working from facebook browser (it`s not showing). It`s working in Opera mobile browser but even there the video is not resized.

I was searching for an answer, even tried with iframe (the video loaded automatically with facebook browser and with Opera mobile it didn`t even appeared).

Maybe it can work if it would be with "lazyload" or something... Can somebody help me with this please? Thank you.

[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.

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, and don't forget you need to 'clear all forum cache' 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}" allowfullscreen frameborder="0"></iframe>
</div>
</div>

Help line

Code: Select all

Youtube video: [youtube]INmtQXUXez8[/youtube]

[mrgtb]

Hold on you're posting this in the phpBB 3.0 forum and that doesn't use a HTML5 responsive theme. Not 100% sure "what I read before", but don't think HTML5 responsive youtube will work in mobile - not unless your site itself is using html5 markup?

[forforce]

Thank you for reply, the website is the one from my signature. I changed it to be responsive, it`s built on phpbb 3.0.12 . Is there a way I can do what I need with phpbb 3.0.12 ?

[mrgtb]

Thank you for reply, the website is the one from my signature. I changed it to be responsive, it`s built on phpbb 3.0.12 . Is there a way I can do what I need with phpbb 3.0.12 ?

If you use a custom HTML5 responsive theme with it 3.0.12, then the youtube code I posted should work with it.

[forforce]

I understand, but if my theme is not in html5 , is there a way to make it work?

[mrgtb]

Not sure?

[Lumpy Burgertushie]

I understand, but if my theme is not in html5 , is there a way to make it work?

have you tried it to see? just takes a couple of minutes and as long as you make backups before you start, you can just revert back to the originals if it doesn't work.

robert

[forforce]

Well, as I expected, now I can`t even see the video , with this code, it shows only the link of the video.

[forforce]

Anybody ?!

[forforce]

I really need to fix this , con somebody help ?

[richey]

Same problem here... :/

[forforce]

anybody ?!