Blog Image

Making embedded videos look great

Make embedded video responsive

FitVids

http://fitvidsjs.com/

Hide YouTube controls and title

To adjust the way imbedded YouTube videos display you can add this to your url string

?rel=0&controls=2&showinfo=0

eg.

<iframe src="//www.youtube.com/embed/EMlpiey20b8?rel=0&controls=2&showinfo=0" height="315" width="560" allowfullscreen="" frameborder="0">

To Play around with more of the parameters check out https://developers.google.com/youtube/player_parameters.

If you want to change the way videos display site wide you can add some jQuery which will add the above string into the iframe tag.

jQuery("iframe").each(function(){
              var ifr_source = jQuery(this).attr('src');
              if (ifr_source.contains("youtube")) {
                if (ifr_source.contains("?")) {
                      var wmodeStart = "&";
                  } else {
                      var wmodeStart = "?";
                  }
              var wmode = "rel=0controls=2&showinfo=0&color=white";
              jQuery(this).attr('src',ifr_source+wmodeStart+wmode);
              }
});

← Go home