Embedding YouTube Videos in Bootstrap

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:

On desktop https://mentorgroup.org/2016/03/the-mentor-group-rewards-points/, here is the blog with the YouTube video:

On mobile, the embedded YouTube video responded well:

Perfect!

Bootstrap Cheat Code for WordPress Thumbnail Mobile Responsiveness

Using the_post_thumbnail() in a WordPress loop displays the post featured image as a thumbnail to the post article. The first parameter size lets setting or customizing the width and height dimensions for the thumbnail. However, I wanted a flexibility for my Bootstrap based WordPress theme wherein the post thumbnail will display in a smaller size in mobile. In short, I wanted a post thumbnail mobile responsiveness on its display. The WordPress loop uses a Media Object to display the title, time posted, excerpt and of course, the thumbnail. A sample loop is shown below:

The Media Object calls the_post_thumbnail() while passing the 'thumbnail' parameter. The 'thumbnail' size is set to 150x150:

When the theme is rendered, WordPress set the width and height attributes to 150. I could have used CSS3's media query, but was not sure is it could have overwritten the width and height attributes. I decided come up with my own cheat code to display the thumbnail in a different size on mobiles:

The cheat involves using two image links. The first image link passes 'thumbnail' as the size parameter. The classes "hidden-xs hidden-sm" makes sure that the image will not display on mobile sized devices. This makes sure that the image is displayed in traditional desktop or laptop computers. The second image link passes array(50,50) as the size parameter. The thumbnail is displayed in 50px width and height. The classes "hidden-md hidden-lg" makes sure that the image will not display on computers with medium or large screens, i.e. desktop or laptop computers. This makes sure that the image is displayed on mobile devices. The WordPress loop code with the Bootstrap cheat is listed below

<?php 
if(have_posts()): 
while (have_posts()): the_post(); 
?>
<div class="media">
 <a href="#" class="pull-left hidden-xs hidden-sm">
  <?php the_post_thumbnail('thumbnail', array( 'class' => 'media-object img-rounded' )); ?>
 </a>
 <a href="#" class="pull-left hidden-md hidden-lg">
  <?php the_post_thumbnail(array(50,50), array( 'class' => 'media-object img-rounded' )); ?>
 </a>
 <div class="media-body">
  <h4 class="media-heading"><?php the_title(); ?> <small>Posted on<?php the_time('F j, Y'); ?></small></h4>
  <p><small><?php echo(get_the_excerpt()); ?></small></p>
  <p><a href="<?php the_permalink(); ?>" class="btn btn-primary">Read More</a>
  </p>
 </div>
</div>
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>

Applying Bootstrap Styles to WordPress Feature Image

For WordPress themes that are based on Bootstrap framework, applying styles such as circled, rounded image or thumbnails provides one way to enhance featured image appearances.

In the screenshot below, a feature image is displayed together with a loop post:

I've used the function the_post_thumbnail() to display the feature image:

Bootstrap circled image style can be applied to the featured image by using the arguments parameter to pass the corresponding class style.

The function the_post_thumbnail() was modified to take 'thumbnail' as the first parameter to define the size and 'array(,,,' to define the attributes. Take note of the Bootstrap image circle style added to the class

The code for the post loop together with the Bootstrap style on the featured image is listed below:

<?php if(have_posts()): while (have_posts()): the_post(); ?>
  <div class="col-lg-6" style="margin-bottom:5px;">
    <div class="media">
      <a href="#" class="pull-left">
        <?php the_post_thumbnail('thumbnail', array( 'class' => 'media-object img-circle' )); ?>
      </a>
    <div class="media-body">
      <h3 class="media-heading"><?php the_title(); ?>. <small><?php echo(get_the_excerpt()); ?></small></h3>
    </div>
    </div>
  </div>
<?php endwhile; ?>