Youtube【Snow Monkey】埋め込み動画の縦横比率を保つCSSコード

  • ブックマーク

WordPressテーマのSnow Monkeyには、YoutubeのURLを貼り付けるだけで、Youtube動画を埋め込みできる素敵機能がある。

レスポンシブで画面の比率が変化すると、埋め込みしたYoutube動画のサムネイル表示の比率が変わってしまい、サムネイル中央だけが表示されるケースもある。

その場合、下のCSSコードを使うことで、Youtube埋め込みの縦横比率を保つことができる。

なお、注意点としては、Youtubeからiframeの埋め込みコードを取得してHTMLで埋め込みしている場合は、上のCSSコードは役立たない。

理由は、URLを貼り付けた埋め込みの時に、下のspanタグが挿入されるのを利用しているから。

<span class="embed-youtube" style="text-align:center; display: block;">

iframeを使ってHTMLで埋め込みしている場合は、URLの貼り付けの埋め込みに変更するか、こちらのページで紹介されているHTMLとCSSを追加して対応する流れになる。

無料メルマガ発行中

メルマガも2021年は頑張って書いています。ぜひ登録して読んでくださいね。(無料です)

メールマガジン
無料で購読
メールアドレス *
* 必須項目

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。


Youtube

  • ブックマーク

この記事を書いた人

情報発信ナビゲーター 大東 信仁

情報発信ナビゲーター / 博士課程中退 / ニックネーム : ものくろ / ブロガー / WordPressが得意 / orz レイアウト開発者 / 株式会社 あみだす 代表取締役