How to embed videos in a web page

Technical communication isn’t just about writing, but includes other kinds of media such as images, diagrams, charts, and videos. These are examples of data displays, and can aid in comprehension. As the old saying goes, a picture is worth a thousand words.

When writing online, you might choose to embed a video in an article. YouTube provides a “Share” button with an option to copy the HTML code to embed the video in a web page. However, the embedded video is locked to a specific size, usually around 560 pixels wide, which can be awkward for users who view the article on a phone with a small display.

Embedding these videos correctly so they are responsive to the display size requires a slight edit to YouTube’s suggested HTML. For example, here’s the code to embed a YouTube video:

<iframe width="560" height="315" src="https://www.youtube.com/embed/WEb_YL1K1Qg?si=78BplTfRarkSqYPf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Note that the frame uses the hard-coded size of width="560" height="315". Instead of a specific size, replace the width and height with a style. I like to apply these styles:

• Define the frame as a block element; this allows you to resize it.
• Set the initial width to 560 pixels, and maximum width to 99%.
• Provide an aspect ratio of 560 by 316. This means if the frame is displayed at less than 560 pixels wide, the browser will figure out how wide it needs to be, but still make it look right.
• Specify a margin around the element. If you use auto on the left and right, the browser will center the element.

<iframe style="display:block; width:560px; max-width:99%; aspect-ratio:560/315; margin:1em auto;" src="https://www.youtube.com/embed/WEb_YL1K1Qg?si=78BplTfRarkSqYPf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

With those changes, embedded videos will look correct, on full size desktops or small phone displays:

More about the video: The video shows Brian Kernighan presenting a history of Unix at VSF East in August 2025. While Kernighan focused on the technical history of Unix, it’s important to remember that Unix quickly became popular for technical writing. The early nroff and troff systems were important for professional document preparation, for example.

I find the video to be a fascinating first-person history of Unix. As Kernighan mentions at the start of his talk, he didn’t invent Unix, but he was fortunate to be there when it happened and work with the people who wrote it.