youtubeの埋め込みをレスポンシブにする

使うときにはいつも忘れているのでメモ。

■指定の場所にyoutubeのリンクを持ったiframeがあれば、youtubeFrameというdivで囲む

$(function(){
    youtubeFrame();
}
function youtubeFrame() {
    $('#hoge iframe[src^="https://www.youtube.com"]').wrap('<div class="youtubeFrame"></div>');
}

■youtubeFrameにレスポンシブをかける

#hoge .youtubeFrame {
  padding-top: 56.25%;
  position: relative;
  border: none;
  margin-top: 30px;
}
#hoge .youtubeFrame iframe {
  height: 100% !important;
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100% !important;
}