Embed YouTube HTML5 player (not Flash)?

Get help developing custom BBCodes or request one.
Jobertim
Registered User
Posts: 238
Joined: Wed Dec 28, 2011 2:25 pm

Embed YouTube HTML5 player (not Flash)?

Post by Jobertim » Tue Dec 01, 2015 9:19 pm

On my phpBB forum I have a custom YouTube BBcode to embed videos using Flash. Now that Adobe is asking developers to stop using Flash, I would like to use a custom BBcode that uses YouTube's HTML5 player rather than Flash.

Any idea how to do that?

Thank you!

Jobertim
Registered User
Posts: 238
Joined: Wed Dec 28, 2011 2:25 pm

Re: Embed YouTube HTML5 player (not Flash)?

Post by Jobertim » Tue Dec 01, 2015 9:46 pm

I found this, which helps: https://www.phpbb.com/customise/db/bbcode/youtube/

However the only HTML5 implementation I found (below) works only if the person enters the youtu.be URL? How do I make this work even if the person enters a youtube.com URL?

Code: Select all

[youtube]{IDENTIFIER}://youtu.be/{SIMPLETEXT}[/youtube]

Code: Select all

<iframe width="560" height="315" src="{IDENTIFIER}://www.youtube.com/embed/{SIMPLETEXT}" frameborder="0" allowfullscreen></iframe>

Jobertim
Registered User
Posts: 238
Joined: Wed Dec 28, 2011 2:25 pm

Re: Embed YouTube HTML5 player (not Flash)?

Post by Jobertim » Tue Dec 01, 2015 11:06 pm

I ended up doing this, which works if the user enters the youtube video ID, but ideally I would prefer it if there was a way to let the user enter whatever they want: either the video ID, or the youtube.com URL, or the youtu.be URL.

Code: Select all

[YouTube]{SIMPLETEXT}[/YouTube]

Code: Select all

<iframe width="560" height="315" src="https://www.youtube.com/embed/{SIMPLETEXT}" frameborder="0" allowfullscreen></iframe>

User avatar
Puchahawa
Registered User
Posts: 768
Joined: Sat Jan 01, 2011 10:33 pm
Name: Randy

Re: Embed YouTube HTML5 player (not Flash)?

Post by Puchahawa » Tue Dec 01, 2015 11:26 pm

Check with joshyPHP about his extension. I'm not sure if it's using html5 or not.
Avatar courtesy of artist Faith Coyotë

User avatar
Lumpy Burgertushie
Registered User
Posts: 65053
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Embed YouTube HTML5 player (not Flash)?

Post by Lumpy Burgertushie » Wed Dec 02, 2015 3:32 am

try this one:

Code: Select all

[youtube]{TEXT}embed/{IDENTIFIER}{TEXT2}[/youtube]

Code: Select all

<iframe width="420" height="315" src="http://www.youtube.com/embed/{IDENTIFIER}" frameborder="2"></iframe>
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

Jobertim
Registered User
Posts: 238
Joined: Wed Dec 28, 2011 2:25 pm

Re: Embed YouTube HTML5 player (not Flash)?

Post by Jobertim » Wed Dec 02, 2015 6:34 pm

Thanks guys,

Lumpy, I'm assuming your code only works if the URL has the word "embed" in it, which the youtu.be URLs don't.

User avatar
Lumpy Burgertushie
Registered User
Posts: 65053
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Embed YouTube HTML5 player (not Flash)?

Post by Lumpy Burgertushie » Wed Dec 02, 2015 9:05 pm

it is not the url in question. if you go to any youtube video and choose the share button, you will get the iframe code. that is what you tell your users to copy and paste into the youtube bbcode and it will work.

it really doesn't matter if it is http://youtube.com or https://youtube.com or http://youtu.be

they all resolve to the very same video as far as I can tell.

give my bbcode a try use it like I show, and see what happens.

roberrt
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

KMDTHY
Registered User
Posts: 9
Joined: Sun Jun 06, 2010 9:14 pm

Re: Embed YouTube HTML5 player (not Flash)?

Post by KMDTHY » Wed Aug 17, 2016 7:42 pm

Hi, a little help here.

Old HTML

Code: Select all

<embed src="http://www.youtube.com/v/{SIMPLETEXT}" wmode="transparent" style="width:720px; height:425px;" id="VideoPlayback" type="application/x-shockwave-flash" flashvars="" allowfullscreen="true">
New HTML

Code: Select all

<iframe width="560" height="315" src="http://www.youtube.com/embed/{SIMPLETEXT}" frameborder="0" allowfullscreen></iframe>
It's working fine. Although there are many IDs with timestamp fx.

Code: Select all

YTID#t=30
But this is not working in the new HTML5 embedding. I has to be:

Code: Select all

YTID?start=30
So how do i solve this, so the new HTML5 embedding can "decode" the old timestamp IDs?

With other words, so that it is possible to "decode" following scenarios.

Code: Select all

CACAmH4r1fw
CACAmH4r1fw#t=30
Thanks

mrgtb
Registered User
Posts: 549
Joined: Wed Oct 03, 2007 10:51 am

Re: Embed YouTube HTML5 player (not Flash)?

Post by mrgtb » Wed Aug 17, 2016 9:44 pm

This is how you can add Responsive YouTube BBCode video to phpBB 3.1 that uses a responsive style. You can change the size of the video displayed 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.
Add this code at the very bottom of it, and you will need to clear all cache afterwards for the change to take effect.

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
Mick
Support Team Member
Support Team Member
Posts: 20141
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

Re: Embed YouTube HTML5 player (not Flash)?

Post by Mick » Wed Aug 17, 2016 9:55 pm

Doesn't editing core code sort of go away from the BBCode idea?
"The more connected we get the more alone we become" - Kyle Broflovski

There are no ‘threads’ in phpBB, they are topics.

mrgtb
Registered User
Posts: 549
Joined: Wed Oct 03, 2007 10:51 am

Re: Embed YouTube HTML5 player (not Flash)?

Post by mrgtb » Wed Aug 17, 2016 10:01 pm

Mick wrote:Doesn't editing core code sort of go away from the BBCode idea?
HTML5 YouYube should shrink size with browser when made smaller to mobile viewing and still show video okay without player breaking style layout. I don't think it's possible by just using BBCode alone.

If anyone know how it can be done without using extra CSS, I'll gladly use that instead. But what I posted above is tried, tested and works.

User avatar
Lumpy Burgertushie
Registered User
Posts: 65053
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Embed YouTube HTML5 player (not Flash)?

Post by Lumpy Burgertushie » Wed Aug 17, 2016 10:53 pm

instead do this:

html replacement:

Code: Select all

<style>
/* 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%;
}
</style>
<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>

then it is all done in the bbcode.


robert
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

User avatar
Mick
Support Team Member
Support Team Member
Posts: 20141
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

Re: Embed YouTube HTML5 player (not Flash)?

Post by Mick » Wed Aug 17, 2016 10:57 pm

mrgtb wrote:what I posted above is tried, tested and works.
I don't doubt that for one moment, that's not what I meant.
"The more connected we get the more alone we become" - Kyle Broflovski

There are no ‘threads’ in phpBB, they are topics.

mrgtb
Registered User
Posts: 549
Joined: Wed Oct 03, 2007 10:51 am

Re: Embed YouTube HTML5 player (not Flash)?

Post by mrgtb » Wed Aug 17, 2016 11:03 pm

Lumpy Burgertushie wrote:instead do this:

html replacement:

Code: Select all

<style>
/* 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%;
}
</style>
<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>

then it is all done in the bbcode.


robert
Yep, it can be done that way then instead as you say, by adding CSS in the bbcode box and avoid editing the common.css

parambyte
Registered User
Posts: 153
Joined: Tue Mar 21, 2006 6:34 am
Contact:

Re: Embed YouTube HTML5 player (not Flash)?

Post by parambyte » Sat Feb 04, 2017 2:56 am

It stopped working in 3.2.
Any workarounds that will make all my earlier posts work again?

Post Reply

Return to “Custom BBCode Development and Requests”

Who is online

Users browsing this forum: No registered users and 12 guests