Наверняка в сети часто встречали ситуацию, когда внешние элементы не правильно отображаются на роликах Youtube.
Не буду писать много, в крации:
Добавить в предлагаемом коде параметр wmode=opaque

Пример: <iframe width="560" height="315" src="https://www.youtube.com/embed/UwC5CzvFdHc" frameborder="0" allowfullscreen></iframe>
нужно будет написать <iframe width="560" height="315" src="https://www.youtube.com/embed/UwC5CzvFdHc?wmode=opaque" frameborder="0" allowfullscreen></iframe>

Если добавлены уже какие то параметры, то нужно сделать через &
Пример: <iframe width="560" height="315" src="https://www.youtube.com/embed/UwC5CzvFdHc?rel=0&wmode=opaque" frameborder="0" allowfullscreen></iframe>

Если по каким то причинам не возможно добавить параметр wmode=opaque, то можно сделать через Jquery, вставить перед видео след. код

Код: Выделить всё · Развернуть

$("iframe").each(function(){
      var ifr_source = $(this).attr('src');
      var wmode = "wmode=transparent";
      if(ifr_source.indexOf('?') != -1) $(this).attr('src',ifr_source+'&'+wmode);
      else $(this).attr('src',ifr_source+'?'+wmode);
});