プログラミングやコードの知識はあまりないけどWordPress（ワードプレス）をご自身で扱っていて、うまく貼り付けたはずのYouTubeがiPhoneやスマホの横幅をブチ抜けイラついているみなさん、たぶん5分もあればその問題解決するのでサクサクっと読んでみてくださいね。
- 追加CSSへのコード記載
- YouTube埋め込み箇所を指定diVで囲む
たったこの2ステップで、
↑このハミ出て醜いYouTubeが
↓↓↓
↑ハミ出ない美しいレイアウトに変わります！
では早速。
ステップ1：下記コードを「追加CSS」に追加
WordPress管理画面→カスタマイズ→追加CSS内の任意の場所に下記コードを追加して更新してください。
◆掲載コード
.youtube {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
これにより、該当するWordPress内のYouTube関連箇所に「レスポンシブにせぇよ」っていう命令を与えることができます。
これだけではまだレスポンシブ化されません。上記の命令をYouTubeを貼り付けた箇所に読み込ませるため、次のステップでYouTube埋め込み箇所に<div>タグを付けます。
ステップ2：YouTube埋め込みコードの前後に<div>タグを設置
YouTubeより取得した埋め込みコードの前後に下記コードを設置します。
<div class=”youtube”>YouTubeの埋め込みコード</div>
これにより、ステップ1で指定した命令をYouTube該当箇所に反映させることができます。それで設定はオシマイです。簡単ですよね(＾Д＾)
※念のためですが編集は「ビジュアルエディタ」ではなく「テキストエディタ」で行なうようにしてください
まとめ
追加CSSへコードを追加し命令を発令し、貼り付けたYouTube埋め込み動画の前後に<div>を設置しその命令を届ける。
この2ステップで終了です。他にもたくさん手法があるみたいなので、あなたに合う方法でスマホでハミ出ない美しいYouTubeを貼り付けてくださいね。