埋め込みyoutube動画をセンタリング表示する方法(レスポンシブ対応版)

埋め込みyoutube動画をセンタリング表示する方法(レスポンシブ対応版)

 

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

markusspiske / Pixabay

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

ブログに埋め込んだツィートをセンタリングするスタイルシートの書き方
ブログを書く動機付けの意味もあって、WordPressで使っているブログテーマを変更しました。Simplicityは素人の私にも内部...

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

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

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

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

これは、ダメでしょう!

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

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

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

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

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

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

追記

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

スポンサーリンク
Facebookページにいいね!をしよう
最新ニュース情報をチェックしよう!

オススメ記事