Web Code Do: 2016

The YouTube Embed provides an HTML code to insert the video in your web page. However, the code it self is not (mobile) responsive.

The steps I will describe shows how to use Bootstrap tags in embedding a YouTube video to make it mobile responsive.

The YouTube video https://www.youtube.com/watch?v=i4klEY-S3OQ will be added in a blog post of my client's Bootstrap enabled WordPress themed website.

I started by copying the embed code of the YouTube video. (Code is then pasted to Notepad application)

The html code is listed below. The src attribute contains the link to the YouTube video.

<iframe width="560" height="315" src="https://www.youtube.com/embed/i4klEY-S3OQ?rel=0&amp;controls=0" frameborder="0" allowfullscreen></iframe>

W3schools provides a page where you may copy the Bootstrap tags to embed YouTube videos, http://www.w3schools.com/bootstrap/bootstrap_images.asp. I copied/ pasted the code to the NotePad where I also pasted the embed code

Here is the code. The src attribute contains the value "...". This should contain the YouTube link.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

The NotePad, which has both the embed tag and the Bootstrap code.

The src attribute value of the iFrame is copied:

The value is pasted to the iFrame src attribute of the Bootstrap tag:

Here is the code:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src=""https://www.youtube.com/embed/i4klEY-S3OQ?rel=0&amp;controls=0"></iframe>
</div>

Finally, the code is added to the blog post: