過去に埋め込んだyoutube動画をレスポンシブに対応させる方法
※jQueryが必要です
調べて実装できたのでメモ。環境によってはうまく動作しない可能性があります。
head内に貼り付けます。ページ内にあるiframe要素をyoutubeというclassがついたdivタグで囲みます。iframe要素で判断しているので、youtube以外のiframe要素があると多分バグります。
CSSに記入します。
調べて実装できたのでメモ。環境によってはうまく動作しない可能性があります。
<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に記入します。
- 関連記事
-
- 奈曽の白滝の写真を撮りに (にかほ市) (2018/04/23)
- UQモバイル で SIMフリー端末に おサイフケータイ iDを設定する (2018/05/20)
- ソウリズムファイナルありがとうございました (2013/12/08)
- 3万円で楽しむ 秋田県からの関西方面旅行 4. たこ焼 十八番 西中島本店 (2016/04/25)
- Broad WiMAX で Speed Wi-Fi HOME L02 を契約 (2019/07/14)
- 仁賀保の自然を満喫 中島台レクレーションの森 (後編) (2013/06/25)
- 種差海岸 / 葦毛崎展望台 / 蕪島 (八戸) (2013/06/03)
- ごめんね、Windows (2016/05/03)
- キッチリフォント からの 脱却 と 挑戦 (2014/04/12)
- 大館 - 盛岡間を ゆっくり 花輪線 / IGRいわて銀河鉄道 で移動する (2017/07/10)