If you use the embed code from a YouTube video, or one from another source, it will often have inline values for width and height. They add this information to keep the ratio of width to height in proper proportions.

The problem is that any forced pixel settings can cause problems with a responsive layout. You need to use percentages for responsive layouts.

To add <iframes> your text editor must have settings that allow <iframes> to be inserted into articles. This can be done in the Global Configurations for the text editor.

Example of a YouTube video embed code

For the video shown above, YouTube provides this embed code:

<iframe width="420" height="315" src="https://www.youtube.com/embed/AOgoqNVp3Ko" frameborder="0" allowfullscreen></iframe>

As you can see, there is a set width and height for the video in the HTML provided. If the containing div for this video reduces to a smaller width, it can cause problems with the layout.

You can solve this with a few steps.

Step 1:

Toggle the text editor to see the article in HTML. Insert the code from YouTube. Remove the width="420" height="315" from the HTML when placing it into your article

Step 2:

Wrap the <iframe> in a containing div with class="video-responsive" while your text editor is toggled to HTML mode.

<div class="video-responsive">
    <iframe src="https://www.youtube.com/embed/AOgoqNVp3Ko" frameborder="0" allowfullscreen></iframe>
</div>

Step 3:

Add the following styling to the style sheet for your site:

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    width: 80%;
    margin: 10px auto ;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

This styling is allowing the width of the outer container for the <iframe> to have a percentage of the div for the content on your page. The overflow:hidden and padding-bottom:56.25% keeps it from having the black bars on the side and in the correct proportion.