過去に埋め込んだyoutube動画をレスポンシブに対応させる方法

2016/02/19　行ってみた/やってみた | コメント(0)

※jQueryが必要です

調べて実装できたのでメモ。環境によってはうまく動作しない可能性があります。

<script>
$(document).ready(function(){
$('iframe').wrap('<div class="youtube" />');
});
</script>



head内に貼り付けます。ページ内にあるiframe要素をyoutubeというclassがついたdivタグで囲みます。iframe要素で判断しているので、youtube以外のiframe要素があると多分バグります。

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}



CSSに記入します。
関連記事

このページのトップに戻る

コメント

名前
メールアドレス(任意)
WEBサイト(任意)
コメント
パスワード
  管理者にだけ表示を許可する

このページのトップへ戻る