Youtubeの動画埋め込みをスマートフォン表示に対応させる方法

公開日: : 最終更新日:2013/12/09 webデザイン

ブログ記事にYouTubeの動画をそのまま埋め込むと、スマートフォンで見た場合に枠の横にはみ出てしまったり、綺麗に表示されない場合があります。
その解決方法を紹介します!

スマートフォン表示での問題点

こんな感じでPC表示のサイズのままで表示されてしまい、右側にはみ出しています。

SS70

この状態では、表示や動作も重たく感じます。

スマホ表示に対応させるには

まず、CSSに以下の記述を追加。

.video-container{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

そして、実際のブログ記事中には以下のdivタグをYouTubeの埋め込みコードの前後に記述します。

<div class="video-container">
/*YouTubeの埋め込みコードをここに入れる*/
</div>

これでスマートフォンでも綺麗に表示できます!

SS71

参考:YoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法 | HTML5 – CSS3 mag

関連記事

記事はありませんでした

dysoncoolfan
ダイソン 羽根のない扇風機の新製品「AM06/AM07」を発表

ダイソンが羽根のないただひとつの掃…扇風機「ダイソンクールファン」の新

abenoharukas
あべのハルカス、ついに全面開業-高さ日本一の300m

近畿日本鉄道が建設した高さ日本一(300m)のビル「あべのハルカス」が

ビットコインの父、米カリフォルニアに在住か-ビットコインとの関係は否定

ビットコインの考案者と言われるナカモト・サトシ氏の所在がThe Fac

LINE電話ってどんなもの?-解説・まとめ

LINE電話とは LINE公式のプレスリリース 公式のプレスリリー

ASUS、ワコム製デジタイザ搭載のVivoTab Note 8を発売開始【レビュー情報】

ASUSTeK Computerが、ワコム製デジタイザ搭載のWindo

→もっと見る