【初心者向け】YouTube動画をブログの中央に表示したい

YouTubeの動画を埋め込む事は出来たけど、表示が左に寄ってるので中央に配置したいわ

わかりました
YouTube動画の埋め込みの中央配置と、レスポンシブ適応化を説明しましょう

YouTube動画の中央配置とレスポンシブ化

YouTube埋め込み動画の中央配置

前回、WordpressにYouTube動画を埋め込む方法を2種類紹介しましたが、2種類ともそのまま張り付けるとコンテンツの左にしか表示されません
これをセンター表示にする為にはWordpressのテーマにCSSを追加してやらなばなりません
外観 → カスタマイズを選択してください

追加CSSをクリックしてください

下図のように追加でCSSを入れてやります

今回、YouTubeの埋め込み動画の中央配置のCSSを追加します
下記のCSSをコピー&ペーストするだけでYouTube埋め込み動画は中央配置されます

.video-container {
	margin: 0px auto;
}

YouTube埋め込み動画のレスポンシブ化

YouTubeの埋め込みコードで埋め込んでもレスポンシブ化されないのでスマホではレイアウトが崩れる事があります
レスポンシブ化させてやるには追加CSSが必要になります
下記のCSSをコピー&ペーストしてください

.video-container {
	max-width: 100%;
}

この追加CSSでレスポンシブ化されない場合は上記の追加CSSを削除後に下記のCSSをコピー&ペーストしてください

@media screen and (max-width:800px) {
.video-container {
	max-width: 100%;
}
}

これでYouTube埋め込み動画の中央配置とレスポンシブ化の完成です

今回のまとめ

YouTube動画の中央配置とレスポンシブ化を簡単にまとめると

  • URLや埋め込みコードだけでは左詰め表示とスマホではレイアウト崩れが起こる
  • 簡単な追加CSSをテーマに組み込んでやれば以後のYouTube埋め込み動画に適応される

2回にわたってYouTube動画の埋め込みと中央配置とレスポンシブ化について説明してきました
WordPressを使用せずに他のブログやHPツールを使い場合はYouTubeの埋め込みコードを使用してください

Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA