Fabled

contents

Sprucing Up Youtubery

YouTube is the web’s primary video distribution method, like it or not. A lot of our favorite music and information can be found there (as well as a lot of nonsense, too). When creating the Aristasian Reminiscence Project site, I used YouTube to gather old news footage, as well as clips from video games from the 2000s. You can easily link to any playlist or video you’ve created on YouTube from your site, of course, but embedding it in your site itself is another story entirely, and a bit trickier. True, YouTube itself gives an “embed” option, but when you use it, typically things look… kind of like a mess, kind of like this:

Not terribly aesthetic, is it? Not easy to see, either. Small, not responsive, not all that pleasant for your users. My quest to improve upon this took me around the web a bit, because clearly other people have solved the problem in various ways. I wanted a simple solution, and I figured out one I could manage, using HTML and CSS. It also allows for a bit more CSS customization if you’re interested in that, too. Given that, this is what it looks like when I use it on this site, but you can, of course, change colors and plenty else.

CSS

To begin, I’ve started with CSS. We need two classes to get things moving. The first, simply called .video, gets applied to the iframe containing the YouTube video itself, styling it and making sure that it maintains a proper aspect ratio. If you want to change the border or rounding of the corners, etc, this is it. The other, called .cinema will apply to a div that wraps the iframe, centering it and sizing it based on width.

    .cinema {
        margin: 0 auto; width:80%;}
    .video {
        aspect-ratio: 16 / 9;
        width: 100%;
        border-radius:10px; border:1em solid #efb1d0; margin:auto;
    }

HTML

The HTML part gets tricky, not because there’s a lot of alterations you’ll need to make, but because you need to video ID for whatever you’d like to insert on your page. This applies whether or not you’re inserting a video or a playlist. To be honest, this isn’t too difficult to sort out just by glancing at the URL, but it takes some practice.

The URL provided by YouTube (when I click share, not embed - the latter provides a full HTML code) for the above video is https://youtu.be/ifgEjv27fe0?si=4zCzN-KOigXV7oEM and the portion I’ve highlighted is the video ID. You can usually find it between a / and a ? in the URL. Inserting it into the code below in the place noted will stream the video or playlist from YouTube.

<div class="cinema">
	<iframe class="video" src="https://www.youtube.com/embed/VIDEO ID GOES HERE?modestbranding=1&rel=0&cc_load_policy=1&color=white" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
top