How to embed a YouTube video into your post....

[mikewalsh]

Afternoon, kiddiwinks.

Following some experimenting this morning - and with assistance from Nic007, our resident YouTube "expert" (cheers, Nic!) - I've sussed out how we can use the 'youtube' button in the posting screen to embed a YouTube video into our posts. I'm in Google Chrome itself today, although these instructions can vary a little from one browser to another.

It's quite simple, too:-

- Open your YouTube video.
- Copy the URL from the address bar. In Chrome itself (remember, YouTube is owned by Google, so Chrome simplifies this as much as possible), you simply copy the URL "as-is":-

i.e., hxxps://yyy.youtube.com/watch?v=RMm_9R6ZUtM (I've modified the URLs for this post, because this new forum software does in fact parse any URL without needing to hit the URL button, and I want the demo to sit below...)

Some other browsers - Iron, for example, and possibly Vivaldi/Opera, though I haven't tried these yet - may have an extra bit on the end, like so (especially if you're linking to vids on your own channel):-

hxxps://yyy.youtube.com/watch?v=RMm_9R6ZUtM&feature=youtu.be

You want to remove this bit, so that you end up with just the URL as shown above. Finally, highlight your URL, then hit the 'youtube' button.

In correct format, this then gives you:-





....an embedded video!

It appears we don't have the option to go "full-screen"; if you attempt this, you get a message saying "Not available". I don't know if this can be "tweaked" by rockedge, or not; I know even he is still learning what you can & can't do with this modern phpBB software. It may be a limitation of the software; I can't say at the moment.

However, this was something I'd wanted to be able to do on the Puppy forum for long enough. Now we can.....and even with "limitations", it's a big step forward for us.

(EDIT:- Once you've started the video, just click on where it says "YouTube" in the control bar at the bottom of the video screen. It'll take you to the main site, where you can then watch it full-screen, or do whatever else you want to with it.)

Hope y'all find this useful..!


Mike.

[rockedge]

I added the youtube BBCode and now modified it to allow for a full screen view via the full screen button on the youtube video

[mikewalsh]

I added the youtube BBCode and now modified it to allow for a full screen view via the full screen button on the youtube video

Are you sure, mi amigo? Umm; I don't like to seem ungrateful.....but it doesn't yet appear to be functioning. (I've got a short "Thank you!" video clip all ready to go, too...!! )

In your own time. No hurry, no worry.... As & when.


Mike.

[taersh]

Watching in full screen mode by the video's full screen YouTube button works for me on the above video!

[mikewalsh]

@ rockedge/Rainer:-

Okey-doke. Right; after much experimenting, let me ask you guys a question....

I'm going to hazard a guess you both run Firefox, or similar.....yes?

Research has shown that any 'zilla-based browser will show the full-screen button, and it'll function correctly. However, with any of the Chromium-based 'clones', the full-screen button is 'greyed-out', and non-functional.....though there is still the option to link across to, and watch your video on the main site.

This being the case, then, the listing is as follows:-

Firefox Quantum, Firefox ESR, Palemoon, Cliqz (the privacy browser), Basilisk (from the PaleMoon crowd), SeaMonkey.....these will all show the full-screen button, and the full-screen option works.

However; Chrome, Iron, Vivaldi, Opera, Brave, Yandex.....in these, the full-screen button is non-functzione, and full-screen is NOT available.

A function of the code-base, then.....and not entirely surprising, either, when you think about it. The clones are all descended from Chromium; the Chromium Projects are sponsored by Google (in reality, Google's browser R & D department); Google owns YouTube. Google, naturally, would much prefer you to watch YouTube videos on the site itself, and thus generate viewing figures/traffic 'footfall'.

Hey-ho. Figures, I guess; I, like many others here, have lost track of the number of times Google have 're-vamped' YouTube's code.....seemingly, just being bloody-minded about it. Just for the sake of it, like.....

Jeezus H. f****** Christ alive.....

(*shrug*)


Mike.

[mikewalsh]

....and just to prove I'm not ungrateful, here's the "Thank you" I promised earlier.....








Mike.

[rockedge]

Looks like the portable Opera also will not play YouTube full screen, even when viewing a video on YouTube's web interface.

All of the mozilla type browsers I have will play the video in full screen from the forum. The Chromium based browsers will not.

[wiak]

So, with Chromium, a 'workaround' is to simply right-click on the embedded video and copy and paste the youtube url into another tab from which you can play fullscreen. It is no problem.

[rockedge]

Hello wiak

The tab trick with Chromium is a decent work around. I read about other tricks but no real fix for this.

I modified the RC controller for a X5C quad-copter with a factory range of 50 meters by replacing the controller's antenna with an antenna that is the correct length for transmission of 2.4 Ghz signals scavenged from a bricked Linksys WiFi router.
This modification increased the range of control to 200 meters. So flying manually by sight I shot some video of the community garden on my street.

[MochiMoppel]

The tab trick with Chromium is a decent work around. I read about other tricks but no real fix for this.

The tab trick is problematic because it opens YouTube's main page, which is not only "heavy" and takes quite a while to load on old HW, it may also start with a long advertisement before you can start the video in normal mode. Going fullscreen takes again a few seconds to get ready. In other words: All advatages of running a light and fast embedded video are gone.

The "real fix" would be to change the code of phpBB's [youtube] tag.
Currently the [youtube] tag creates the embedded video using an <object> tag. This is not what the Google documentation recommends. Instead change it to an <iframe>. This will cause the fullscreen button to work in Chrome based browser.

Here is how you can test. Create a small HTML page using following bare-bone code and open the page in your Chrome browser. The left video uses <object>, ripped from this topic page.
The right video uses <iframe>. You may not need all parameters, but essentially it should work the same as the left video, with the difference that it can be fullscreened.

Code: Select all

<!DOCTYPE html><html><body>
<object width="425" height="350"><param name="movie" value="https://www.youtube.com/v/yQQvcNYLolQ"><param name="wmode" value="transparent"><embed src="https://www.youtube.com/v/yQQvcNYLolQ" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350" allowfullscreen="true"></object>
<iframe width="425" height="350" src="https://www.youtube.com/embed/yQQvcNYLolQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body></html>

[mikewalsh]

@MochiMoppel :-

I'm going to show my continued ignorance here, I'm afraid! How can I test your code? Do I need to make it into a script, then make sure the browser I want to test is set as default.....or??

Some of this kind of stuff I never really have got to grips with. Instead of spending I don't know HOW long trying to track down similar stuff in the old forum, it's easier to admit my lack of knowledge & ask you straight out...

(*shrug*)

Will the "iframe" workaround then make this functional for both families of browsers?


Mike.

[MochiMoppel]

Just copy the code to a file and give this file a .html extension, e.g. testcode.html. Then drag/drop the file into your chrome browser or run from command line with
/path/to/chromebrowser /path/to/testcode.html

And yes, it will work for both browser families.

[mikewalsh]

Thanks, Mochi.

Yes, that works nicely for Chrome.....and by extension, it should work for all Chromium 'clones', too, since they share the same code-base. Cheers! That's very much appreciated, mate.

I'll drop rockedge a PM and let him know. Full credits to you, of course.


Mike.

[rockedge]

I will insert an iframe version of the BBcode soon. I just need to get the tokens for the variables in the right places and test it.

[mikewalsh]

I will insert an iframe version of the BBcode soon. I just need to get the tokens for the variables in the right places and test it.

Mike.

[rockedge]

@mikewalsh @MochiMoppel ,

I have swapped out the <object> tag for the <iframe>. Please test and report.

[MochiMoppel]

I can't use chrome browsers on my netbook, so I 'm not a suitable tester.

I see an allowfullscreen="" in the generated page source. I would expect that this would be interpreted as "0" but strangely it works - at least in Palemoon.

BTW: How is the original URL https://www.youtube.com/watch?v=[VIDEO_ID] converted into the required URL https://www.youtube.com/embed/[VIDEO_ID]?

[rockedge]

here is the code I am using:

Code: Select all

[youtube]{IDENTIFIER}://{SIMPLETEXT1}youtube.com/embed/{SIMPLETEXT2}[/youtube]

Code: Select all

<iframe src="{IDENTIFIER}://{SIMPLETEXT1}youtube.com/embed/{SIMPLETEXT2}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="1" width="425" height="350"></iframe>

[MochiMoppel]

here is the code I am using

Really? Not a typo - or rather a pasto?. The first line contains '/embed' which is not what the user enters. I still assume that you use something like this:
[youtube]{IDENTIFIER}://{SIMPLETEXT1}youtube.com/watch?v={SIMPLETEXT2}[/youtube]


Ideally the BBcode should support both of YouTube's URL formats.
https://www.youtube.com/watch?v=yQQvcNYLolQ
https://youtu.be/yQQvcNYLolQ

When I tested this worked for me:

Code: Select all

[youtube]{TEXT1}youtu{TEXT2}{SIMPLETEXT}[/youtube]

Code: Select all

<iframe src="https://www.youtube.com/embed/{SIMPLETEXT}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="1" width="425" height="350"></iframe>

[mikewalsh]

@mikewalsh @MochiMoppel ,

I have swapped out the <object> tag for the <iframe>. Please test and report.

Morning, rockedge.

Works perfectly for me. Firefox & 'zilla-based browsers always did.....and now Chrome does, too. (And Iron.....and Opera.....and Vivaldi.....and Brave.....and Yandex.....) In short, all Chromium-based clones are now getting the 'fullscreen' button showing correctly; not 'greyed-out' any longer.

It works as expected, too.

Thank you..!


Mike.

[rockedge]

Hello! @MochiMoppel

I have replaced the html code for the youtube BBCode using the snip you provided. Seems to work well with both forms of the YouTube URL's. The following video is using

Code: Select all

[youtuber]https://youtu.be/0k3jBEaUN_8[/youtuber]

[rockedge]

media embed BBCode now is working. For YouTube URL's please use the youtube BBCode.

Code: Select all

[media]https://soundcloud.com/correspondant/hammer-jupiter-synths?in=soundcloud-circuits/sets/psychedelic-electronic[/med

[rockedge]

These are the sites that the [media][/media] BBCode will embed into a post

Screenshot(16).png (291.81 KiB) Viewed 1506 times

[MochiMoppel]

[media] example with LiveLeak seems to work.

Code: Select all

[media]https://www.liveleak.com/view?t=uAmgT_1600033067[/media]

[rockedge]

@MochiMoppel

The [media][/media] BBCode tag will now embed YouTube URL's. I have renamed the custom bbcode from [youtube] to [youtuber] for a compatibility to the youtube named bbcode. I will soon remove it and only use [media]

[ETP]

Test embed of 2016 video - TV/PVR Xenial Pup V3

[MochiMoppel]

The [media][/media] BBCode tag will now embed YouTube URL's. I have renamed the custom bbcode from [youtube] to [youtuber] for a compatibility to the youtube named bbcode. I will soon remove it and only use [media]

@rockedge Thanks. The [media] button works much better than [youtuber]. It even accepts URLs like
https://www.youtube.com/watch?v=[VIDEO_ID]&feature=emb_rel_end , a form that cannot be parsed with the BBcode string replacement method. Is there any way to make the list of supported sites more readable?

[rockedge]

Is there any way to make the list of supported sites more readable?

Yes there is. I will create a list that is actually text and post it.

[mikewalsh]

@rockedge :-

Mm. Looks like this has potential, mate. This'll put us one up on BleepingComputer, anyhow; they can show YouTube vids, but precious little else.

Seems this phpBB code has almost unlimited possibilities..... Nice one!




Mike.

[rockedge]

@MochiMoppel
Here is the [media][/media] bbcode list of sites with content that can be embedded.

Column 1	Column 2	Column 3	Column 4	Column 5	Column 6
ABC News	8tracks	Imgur	National Geographic	Spreaker	Vevo
Allocine	ESPN	Indiegogo	NBC News	Steam store	Video Detective
Amazon Product	Facebook	Instagram	NBC Sports	Stitcher	Vimeo
Anchor	Flickr	Internet Archive	NHL Videos and Highlights	Straw Poll	Vine
Audioboom	Fox News	İzlesene	NPR	Streamable	VK
Audioboom	FOX Sports	JW Platform	The New York Times Video	Streamja	Vocaroo
Bandcamp	Funny or Die	Kontinental Hockey League	Orfium	Team Coco	Vox
BBC News	Gamespot	Kickstarter	Pastebin	TED Talks	Washington Post Video
BitChute	GameTrailers	Libsyn	Pinterest	Telegram	WorldStarHipHop
Bleacher Report videos	Getty Images	Liveleak	Podbean	The Atlantic Video	The Wall Street Journal Online
Break	Gfycat	Livestream	Prezi	The Onion	GameClips.io
Brightcove	Gifs.com	Mail.Ru	Reddit threads and comments	TikTok	Gamer DVR
CBS News Video	GitHub Gist	Medium	Rutube	TMZ	Youku
CNBC	Global News	Megaphone	SchoolTube	Trailer Addict	YouTube
CNN	GoFundMe	Metacafe	Scribd	Trending Views	-
CNNMoney	Google Drive	Mixcloud	Sendvid	Tumblr	-
Comedy Central	Google+	Mixer	SlideShare	247Sports	-
Coub	Google Sheets	MLB	snotr	Twitch	-
Dailymotion	Hudl	Mod DB	SoundCloud	Twitter	-
Democracy Now!	Hulu	MRCTV	Sporcle	Ustream	-
Dotsub	IGN	MSNBC	Sportsnet	VBOX7	-
dumpert	IMDb	National Geographic Channel	Spotify	Veoh	-