Embed YouTube Videos Responsively on Your Website + Laravel CKEditor

▶

Another detail I find interesting is the ability to embed responsive YouTube videos on our website.

If we go to YouTube, select the video, click "Share," then "Embed," and copy the generated code.

If you try to paste that code directly into the editor, you'll see that it doesn't automatically adapt to the window size. To fix this, there are a couple of ways, and this again depends on how you've configured your editor.

Video Responsive

The problem? The video isn't responsive, meaning it doesn't adapt to different screen sizes. You'll see a very awkward scroll bar appear.

To fix this, we'll adapt the video manually, defining the following CSS:

.video-container {
	aspect-ratio: 16 / 9;
	margin: 15px auto;
	overflow: hidden;
	position: relative;
	width: 100%;
	max-width: 600px;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

And now we define videos as:

<div class="video-container">
 <iframe src="..." frameborder="0" allowfullscreen></iframe>
</div>

With that, the iframe has width and height at 100%, top and left at 0, and the defined aspect ratio is controlled by the container.

You can play with these values ​​to see how it behaves. This HTML and CSS works for any YouTube video with a 16:9 aspect ratio, which is the most common.