Embed YouTube video in WordPress

The easiest way is to select the Share button under the video in YouTube and copy the link and paste it into your post.

  https://youtu.be/FVRm7oRCTkjE

However, in this blog with the theme “Simple Bootstrap”, the video was not resizing properly as the page became smaller and the video was being truncated.

An alternative is to embed the video in the post using the Embed option after clicking on the Share button. This generates the code to enter into your post

  <iframe width="560" height="315" src="https://www.youtube.com/embed/VRm7oRCTkjE" frameborder="0" ></iframe>

The frame was still not changing dynamically as the page became smaller so the final step is to enclose the frame in some custom css code. The code is added to the section Additional CSS under the Customise option of the Theme being used


.youtube-responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
 

Finally, use the following HTML code around the frame in your post as follows:

<div class="youtube-responsive-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VRm7oRCTkjE" frameborder="0"  allowfullscreen></iframe>
</div>