How To Embed YouTube Videos

[TomXP411]

Great news! I was able to add YouTube embeds to the forum.

Here's how to add them to your post:

1. Locate your YouTube video and click the "share" button on the page. You should get a link that looks like
https://youtu.be/I0kkCvz6wC0

2. Click the (COPY) link in the popup box.

3. Press the YT button on the toolbar in the editor. You'll get something like this: [yt][/yt]

3. Paste your youtu.be link inside of the tag, like this:
[yt]https://youtu.be/I0kkCvz6wC0[/yt]

4. Now watch this sample video that I have included for your viewing pleasure:


For those of you who embedded YouTube embeds in your old posts, if you can go back and update your old posts with the new tag, that would be very helpful.

[Edmond D]

Wow - what a quick turn around on this item. Thanks! 

[StephenHorn]

I was going to go back and fix my old posts' Youtube embeds, but it appears that all of my posts' Youtube videos were helpfully replaced with "?" and no information about the video that had been embedded. I can search for "www.youtube.com" and see that <a href> links remain, but I'm thinking most (maybe all?) of the "proper" embeds from the previous forums have been lost.

(In my case, probably not much of a loss, but I'm surprised that this hasn't been felt more keenly when trying to restore SlithyMatt's videos, which were largely of the "highly applicable and useful" variety.)

[Java Cake Games]

Could you please make the embeds responsive as I previously alluded to on Discord? This will enable videos to fit on the screen for mobile users and not cause horizontal scrolling.

The padding hack is no longer required to enforce an aspect ratio upon an element (unless you want Internet Explorer support) so it's not as messy a problem to solve as you might have seen.

The following CSS assumes the iframe has a youtube class:

.youtube {
  width: 100%;
  max-width: 560px;
  height: auto;
  aspect-ratio: 16/9;
}

This isn't a perfect solution, as 4:3 videos will be pillarboxed, but despite our retroness I expect most embedded videos will be widescreen. Obviously just change aspect-ratio to 4/3 if you want 4:3.

In your HTML, I'd personally use youtube-nocookie.com, scrap the allow and title attributes, and add loading="lazy", but I don't want to be a backseat driver.

Sorry about the blue but it's the closest thing we have to a code block on here. [mono] doesn't preserve whitespace (and uses deprecated HTML).

[TomXP411]

That's not a bad idea. I just grabbed the embed code that YouTube generates with the "Share" link. It's a quick and dirty hack, using the built in bbcode template feature of phpbb. I'll have to look into this tonight, after work. I'll also fix the MONO tag to use PRE blocks.

[Java Cake Games]

<pre> will break my inline usages of [mono]. I think there's no winning without splitting it into separate tags for inline and block.

[TomXP411]

<pre> will break my inline usages of [mono]. I think there's no winning without splitting it into separate tags for inline and block.

Actually, there is a code block. It's the 5th button on the toolbar, it looks like </>. Or you can just use the [code] tag.

Code: Select all

This is the code block.

[StephenHorn]

Yes, but I think the point was that <pre> seems to imply a <br /> before the text contained within it, which means current uses of [mono] for inline monospace text will suddenly change behavior if switched to that HTML tag.

Perhaps [mono] should resort to wrapping stuff in <code> tags, or maybe <samp>, while the behavior of [code] remains untouched.

[Java Cake Games]

Oh. Me me big dumb. Just leave [MONO] as it is, then.

Edit: Or change it how Stephen suggested. My point is: whitespace/indentation removal isn't an issue when used for inline purposes.

[TomXP411]

Yes, but I think the point was that <pre> seems to imply a <br /> before the text contained within it, which means current uses of [mono] for inline monospace text will suddenly change behavior if switched to that HTML tag.

Perhaps [mono] should resort to wrapping stuff in <code> tags, or maybe <samp>, while the behavior of [code] remains untouched.

Sorry, what I meant was that you didn't need to use the x16 tag just to display some CSS, when we have the code tag.

Yes, MONO was generally meant for inline text, so I could say things like: Type LOAD "filename" to load a program.

I get the problems using <pre> as an inline monotype tag, so I'll just let that sit. I did change the <tt> over to a <span>, though.

To keep things simple, I also reduced the size of the YouTube iframe. I'll probably push out a little wider, to make it 16:9. Adding CSS is problematic, because each theme has a different CSS file, and I don't want to maintain three separate CSS entries every time the software updates. I can probably use an inline style, though, so I'll play with that a bit later. It is not going to be reactive, in that it's not going to have distinct style elements for mobile and desktop: again, this is for maintenance reasons.