YouTube – Responsive video aspect ratio and embedding options

Maintain iFrame video aspect ratio for responsiveness

HTML

<div class="aspect-ratio">
<iframe src="https://www.youtube.com/embed/NV3bPEjNeKU" frameborder="0" width="550" height="275" frameborder="0" allowfullscreen></iframe>
</div>

CSS

/* This element defines the size the iframe will take.
In this example we want to have a ratio of 25:14 */

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%; /* The height of the item will now be 56% of the width. */
}
 
/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

EXAMPLE

---

---

YouTube Embedding options

You can pass the following params through the embedding url:

• hd=1 (play in HD)
• autoplay=1 (autoplay on load)
• showinfo=0 (show title and infos)
• controls=1 (show controls)
• rel=0 (disable related videos at the end of the video)
• iv_load_policy=3 (this will disable the annotations for the video)