Integrate YouTube videos responsively

The YouTube video platform allows you to embed videos into your own website. This is very easy and quick to do thanks to a sharing function in YouTube. However, the video is not scaled down with the code supplied by Google on mobile devices and is therefore cut off. This will no longer happen with the following trick.

1. Integrate the video into your own website

Simply search for the desired video on YouTube, then click on the Share button.

Now click on "Embed".

And copy the code in the text field.

This code looks something like this:

Now insert this code into your own website at the desired location.

2. Optimise video for mobile devices

Now a div must be placed around this iframe, which is given a class that we will then use.

We can now customise this container with the responsive-video class using CSS. To do this, we need the following two definitions in CSS:

/* Sets the container of the video responsive */.responsive-video { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ padding-top: 25px; height: 0; }/* Sets the iframe of the video so that it fills the container completely */.responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

This section of code does two main things:

1. .responsive-video: Defines a container with a relative positioning context. The padding-bottom of 56.25% creates an aspect of 16:9, which is the standard for most videos. padding-top could create additional space at the top of the container, and height: 0 prevents the container from taking up any space of its own, apart from the space for the embedded iframe.

2. .responsive-video iframe: Places the iframe absolutely inside the container so that it fills the entire available space(width: 100% and height: 100%). The position of top: 0 and left: 0 ensures that it is aligned exactly within the container.

If you now want to adjust the size of the video, you must adjust the padding-bottom value. The 56.25 % is roughly a video format in 16:9, so you need to try out what fits best.

And then the video is responsive and is also optimally displayed on mobile devices.

FAQs - Frequently asked questions about embedding responsive YouTube videos

How do I embed a YouTube video?

You can click on the share button for a desired YouTube video, then select "Embed" and then insert the displayed code at the desired location on your website. You can also use a WordPress plugin for embedding.

Can I link YouTube videos on my homepage?

Yes, as the video is not downloaded, but only linked to where it is stored on YouTube. As long as the video content is legal, publicly accessible and does not contain hate speech, you may link to it on your homepage. Of course, you can also link your own YouTube videos.