ワードプレスにYouTube動画を貼付けた時に、そのまま貼ってしまうと、
スマホなどで表示してみると、画面から大きくはみ出してしまいます。

PCでの表示はちゃんとされているので、
スマホまでは気にしていない人もけっこういるんですよね(^_^;)

でも、今は、PCよりもスマホでサイトを見る人の方が、
圧倒的に多いので、ブログのテンプレートだけでなく、
動画もサイズを自動調整してくれるレスポンシブ対応にしておきましょう。

というワケで、今回は、
埋め込みしたYouTube動画をレスポンシブ対応にする方法
を紹介します。

僕自身がCSSを未だによくわかっていないので(苦笑)、
そんな人でもできるように、できる限り、具体的にわかりやすく解説していきます。

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%;
}
参考にした記事はこちら↓
参照：ワードプレス投稿に埋め込んだYouTube動画を簡単なCSSで、たった2分でレスポンシブ対応！
コピーできたら、「外観」⇒「CSS編集」を選択。
CSSスタイルシートエディターにさっきのコードを貼付けます。
あとは、スタイルシートを保存すれば、CSSの設定は完了です。
HTMLの設定
HTMLの設定は、記事を書く時に、
埋め込みコードを以下のコードで囲めばいいだけ。
<div class="video-container">YouTube埋め込みコード</div>
 
ちなみに、埋め込みコードの取得の仕方は、
まず、埋め込みたい動画の下にある「共有」をクリック。
 
次に、「埋め込みコード」と出るので選択し、
そこに表示されるコードをコピーして、記事を書く時に貼り付ければOKです。
(貼り付ける時は「テキストモード」にしてくださいね)
このコードをさっきのコードで囲めば、
画面に応じてサイズ調整してくれるレスポンシブ対応になります。
試しに、この記事にも動画を貼っておきましょうか。
実際の記事作成画面ではこんな感じ↓(ちょっと見づらいですが…)
で、動画はこちら↓
 
パソコンで見ても、スマホで見ても、ちゃんと最適なサイズで表示されているはず。
以上で、YouTube動画のレスポンシブ対応は完了です。
 
読んでいただき、ありがとうございました。