YouTube埋め込み動画をスマホに最適なサイズにする方法【wordpress】

ブログに埋め込んだYouTube動画をスマホやタブレットで最適なサイズにしレスポンシブにする方法の紹介です。

レスポンシブとは？

「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなどの異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し、見やすく最適な表示にすることです。

このレスポンシブWebデザインのメリットは１つのファイルでPC・タブレット・スマホなどですべての表示を行うことができることです。テキスト・画像などは共通のものを利用出来ますので、更新や修正といった管理がしやすくなります。

埋め込み動画を最適化する方法

　

初級の私はこの方法でうまく出来たので紹介します。

CSSとHTMLタグをカスタマイズ

CSSスタイルシートに以下のコードをそのままコピペして貼り付けます。

.video {

position: relative;

height: 0;

padding: 30px 0 56.25%;

overflow: hidden;

}

.video iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

　

　

埋め込みコードの設定

記事に動画サイトの埋め込みコードをコピペして貼り付けます。

そして埋め込みコードの前後に下記のコードを追加します。

　

<div class=”video”>

　YouTubeの埋め込みコード

</div>

　

これで作業は完了です。

おわりに

TouTube動画を埋め込んだ際にスマホでサイズがおかしかったので設定をかえました。

とっても簡単に設定できたので、その方法の紹介でした。