Full Width Responsive WordPress YouTube Embeds Automatically

By Arun Basil Lal — on January 12, 2018 — 2 Comments ↓

Add this to the functions.php

/**
 * Add Response code to video embeds in WordPress
 *
 * @refer  http://alxmedia.se/code/2013/10/make-wordpress-default-video-embeds-responsive/
 */
function abl1035_alx_embed_html( $html ) {
  
  return '<div class="video-container">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'abl1035_alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'abl1035_alx_embed_html' ); // Jetpack

Add this to your stylesheet

/*---------- Video Embeds ---------*/
  
.video-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}
  
.video-container iframe, .video-container object, .video-container embed, .video-container video { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0;
  width: 100%;
  height: 100%;
}

Adjust or remove max-width as needed.

Hello, I am Arun Basil Lal. Thank you for reading!

I am a WordPress product developer and creator of Image Attributes Pro. I am passionate about solving problems and travelling the world.

Divi is a WordPress theme that web designers do not want you to know. It comes with a drag-and-drop theme builder. You can build beautiful looking unique websites without touching a line of code. Just choose from one of the many pre-made layouts, or pick elements and arrange them any way you like.

Divi is every WordPress developer's wet dream. Surprise your clients with neat responsive websites and have fun building them.

Divi comes from Elegant Themes. If you enjoy building websites, you *need* an Elegant Themes membership. 87 beautiful themes and 5 plugins for the cost of less than a candy-bar each!

Divi Live Demo

Note: I am an avid user of Divi myself and this is a honest review. I wouldn't recommend something that I do not personally find amazing.