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


https://www.youtube.com/watch?v=xU1QISVKp9I





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]

https://youtu.be/0k3jBEaUN_8

[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 4139 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
https://youtu.be/Dcr0jtG6ux4

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