How can I make bbcode youtube video responsive and lazyload ?

Looking for a MOD? Have a MOD request? Post here for help. (Note: This forum is community supported; phpBB does not have official MOD authors)
Scam Warning
Locked
forforce
Registered User
Posts: 323
Joined: Fri Oct 04, 2013 7:57 am
Contact:

How can I make bbcode youtube video responsive and lazyload ?

Post by 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.
https://www.cumseface.eu , We have tutorials for everything / Te ajutam se te descurci singur .
User avatar
mrgtb
Registered User
Posts: 603
Joined: Wed Oct 03, 2007 10:51 am

Re: How can I make bbcode youtube video responsive and lazyload ?

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.

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]
User avatar
mrgtb
Registered User
Posts: 603
Joined: Wed Oct 03, 2007 10:51 am

Re: How can I make bbcode youtube video responsive and lazyload ?

Post by 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
Registered User
Posts: 323
Joined: Fri Oct 04, 2013 7:57 am
Contact:

Re: How can I make bbcode youtube video responsive and lazyload ?

Post by 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 ?
https://www.cumseface.eu , We have tutorials for everything / Te ajutam se te descurci singur .
User avatar
mrgtb
Registered User
Posts: 603
Joined: Wed Oct 03, 2007 10:51 am

Re: How can I make bbcode youtube video responsive and lazyload ?

Post by mrgtb »

forforce wrote: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
Registered User
Posts: 323
Joined: Fri Oct 04, 2013 7:57 am
Contact:

Re: How can I make bbcode youtube video responsive and lazyload ?

Post by forforce »

I understand, but if my theme is not in html5 , is there a way to make it work?
https://www.cumseface.eu , We have tutorials for everything / Te ajutam se te descurci singur .
User avatar
mrgtb
Registered User
Posts: 603
Joined: Wed Oct 03, 2007 10:51 am

Re: How can I make bbcode youtube video responsive and lazyload ?

Post by mrgtb »

Not sure?
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: How can I make bbcode youtube video responsive and lazyload ?

Post by Lumpy Burgertushie »

forforce wrote: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
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
forforce
Registered User
Posts: 323
Joined: Fri Oct 04, 2013 7:57 am
Contact:

Re: How can I make bbcode youtube video responsive and lazyload ?

Post by forforce »

Well, as I expected, now I can`t even see the video , with this code, it shows only the link of the video.
https://www.cumseface.eu , We have tutorials for everything / Te ajutam se te descurci singur .
forforce
Registered User
Posts: 323
Joined: Fri Oct 04, 2013 7:57 am
Contact:

Re: How can I make bbcode youtube video responsive and lazyload ?

Post by forforce »

Anybody ?!
https://www.cumseface.eu , We have tutorials for everything / Te ajutam se te descurci singur .
forforce
Registered User
Posts: 323
Joined: Fri Oct 04, 2013 7:57 am
Contact:

Re: How can I make bbcode youtube video responsive and lazyload ?

Post by forforce »

I really need to fix this , con somebody help ?
https://www.cumseface.eu , We have tutorials for everything / Te ajutam se te descurci singur .
User avatar
richey
Registered User
Posts: 636
Joined: Mon Feb 18, 2002 4:26 pm
Location: now@Cyberspace
Contact:

Re: How can I make bbcode youtube video responsive and lazyload ?

Post by richey »

Same problem here... :/
.
forforce
Registered User
Posts: 323
Joined: Fri Oct 04, 2013 7:57 am
Contact:

Re: How can I make bbcode youtube video responsive and lazyload ?

Post by forforce »

anybody ?!
https://www.cumseface.eu , We have tutorials for everything / Te ajutam se te descurci singur .
Locked

Return to “[3.0.x] MOD Requests”