こんにちはkanaです！
ブログを運営していると、記事内にYouTube動画を埋め込みすることがあります。
そのYouTube動画がスマホでちょうどいいサイズで表示されずに、とてもみずらくなってしまうことってあるんですよね。
どーやったら上手に表示できるのか・・・
試行錯誤してみた結果、解決したので情報として残しておきたいと思います。
『レスポンシブ』とは？
れすぽんしぶ・・・って何？
初心者の頃はこんな感じだったのですが、サイトを運営していくとよく聞くワードになります。
レスポンシブを簡単に言うとPC、タブレット、スマートフォンなどの異なる画面サイズに合わせて最適に、見やすく表示させるデザインの事のようです。
PCのみの表示にしか対応していないwebサイトを見る場合、スマートフォンだとPC表示されしまうので拡大しないとみずらかったりしますよね(^^;
YouTube動画も、スマホやPC、タブレット、どのデバイスで見ても最適なサイズに表示してくれる「レスポンシブ設定」をすることができるんですね。
テンプレートによっては自動でレスポンシブ設定になるテンプレートもあるようです。
WordPressテンプレートの『simplicity』に関しては自動でレスポンシブ設定になるようなのでコチラはやる必要はないと思います。
YouTube動画をレスポンシブで埋め込みする方法【動画】
YouTube動画をレスポンシブで埋め込みする設定
①YouTubeの埋め込みコードを取得する
②CSSにコードを挿入する
↓コチラをコピペしてCSSに貼り付けをしてください↓
/*YouTubeレスポンシブサイズ*/
.youtube {
position: relative;
max-width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
③AddQuickTagにタグを設定する
※AddQuickTagをインストールされていない方は
インストールしてから作業をしてください。
インストール方法がわからない場合はコチラの動画を参考に導入してください。
https://egako.net/addquicktag-wpplugin-758
AddQuickTagをインストールしたら
↓コチラをコピペしてAddQuickTagに貼り付けをしてください↓
<div class=“youtube”>YouTube埋め込みコード</div>
いかがでしたか？
コチラの設定さえできてれば、あとは記事編集の画面で毎回タグを入力することもなくYouTube動画を貼り付けすることができます＾＾
是非参考にしてみてください♪
