Embed Full Width Youtube Video in WordPress

You will come across this situation when editing pages or posts on WordPress and adding a video to be displayed the full width.

This doesn’t always work out of the box with the settings provided by the embed code from Youtube and even embeded images will not always appear to be really full width, leaving a margin on each side.

You can use this solution for both videos and images.

1. Create a <div> around your image or video frame that you will have copied from Youtube, so that it looks like this:

   <div class="video-box">
   <!-- add here your iframe or image -->
   </div>

    

2. Now to your CSS

   .video-box {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   height: 0;
   overflow: hidden;
   }
   .video-box iframe,
   .video-box object,
   .video-box embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   max-width: 100%;
   }