こんにちは bibaです。
昨日、埋め込みyoutubeをセンタリング表示する方法に関することも記事を書きました。今回の記事は、このCSSを修正したという話です。スマートフォンでこのサイトを見たら、かなり見苦しい感じだったからです。

markusspiske / Pixabay

昨日のこんな記事です。メインはTwitterの話でしたが、蛇足でyoutubeのことも書きました。

ブログに埋め込んだツィートをセンタリングするスタイルシートの書き方

そこで紹介したyoutube動画をセンタリングするためのCSSの内容はこんな記述です。

#Video iframe {
display:block;
margin:0 auto;
}

ところが、この方法には問題あるとことに気づきました。

確かにセンタリングはうまくできるようになりました。

しかし、スマートフォンなど画面サイズの小さな端末でyoutubeを表示すると、画面からyoutubeの映像がはみ出してしまうのです・・・

これは、ダメでしょう!

そこで、youtube表示をレスポンシブにすることにしました。

記述内容は次のとおりです。

まず、スタイルシートでは・・・

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

動画を埋め込む箇所のHTMLでは・・・

<div class="youtube">
  (ここに動画埋め込みコード)
</div>

今回、修正するに当たって、「id」を「class」にしてみました。もちろん「id」のままでも大丈夫です。使える回数が違うだけです。

以上、備忘録第2弾でした。

追記

後日、ブログテーマをsimplicityにしてみたら、思いどおりに表示できてなきませんでした。ブログテーマをsimplicityの場合、次のようなスタイルシート記述のままで大丈夫でした。コロコロ変更して混乱させてしまいました。

.
.youtube iframe {
   display:block;
    margin:0 auto;
}
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
bibalogue