A short interview about An Lac House

In this post, we want to present how to embed a YouTube video into your WordPress and keep it responsive. What we need is to add a few CSS attributes as shared here.

.video-container {
  position: relative;
  padding-bottom: 56.25%;
}

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

Combined with markup like this:

<div class="video-container">
  <iframe
    src="https://youtu.be/o1sML93K5M4"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope;"
    allowfullscreen></iframe>
</div>

Using the aspect-ratio property

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Then, using this class like below:

<iframe class="video" title="YouTube video player" src="https://www.youtube.com/embed/o1sML93K5M4?si=ls-lKs7yCb3rHsJM&amp;rel=0" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>

Or using these CSS attributes as inline ones:

<iframe style="aspect-ratio: 16/9; width: 100%;" title="YouTube video player" src="https://www.youtube.com/embed/o1sML93K5M4?si=ls-lKs7yCb3rHsJM&amp;rel=0" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>