パソコン裏技

ワードプレスにでyoutubeをレスポンシブで埋め込みをする方法(プラグインなし)を解説

YouTubeをブログに埋め込む際、自分で見ているスマホ、PCではキレイに埋め込まれていたとしても、誰かのスマホやPCで見たときにはそう見えていないかもしれません。

私も以前は気にしないでコードだけを貼っていたのですが、最近どうも崩れるようになったので、こちらの方法で対処しました。

それでは「ワードプレスにでyoutubeをレスポンシブで埋め込みをする方法(プラグインなし)を解説」についてお伝えしていきます。

ワードプレスにでyoutubeをレスポンシブで埋め込みをする方法(プラグインなし)を解説

レスポンシブとは?

スマホやPC、タブレットなどは、それぞれ機種によって画面の大きさなどが異なりますよね。レスポンシブとは、そのそれぞれの画面に適した表示をすることです。
レスポンシブ対応にしないと、見にくさなどから離脱する原因にもなってしまいますので、できるだけ対応しましょう。

ワードプレスにでyoutubeをレスポンシブで埋め込みをする方法(プラグインなし)

貼り付けたYouTubeの画面が、本来は長方形(右)のはずが、正方形(左)になってしまっています

それでは、レスポンシブの埋め込み方を解説していきます。

①CSSにコードを貼り付け

下記をコピーし、追加CSSまたは、「外観」→「テーマエディター」→「スタイルシート (style.css)」の一番下に貼り付けます。

スタイルシート (style.css)は、誤って別の操作をすると、デザインが大きく崩れてしまいます。十分ご注意ください。必ずあらかじめバックアップを取ってからの操作をしてください。

CSS貼り付けコード

/*YouTubeの幅レスポンシブ*/
.yt{position:relative;
width:100%;
padding-top:56.25%;
}
.yt iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}
/*YouTubeの幅レスポンシブここまで*/

②YouTubeの埋め込みコードをコピー

ここはいつも通りにYouTubeから埋め込みコードをコピー※し、ワードプレスの<ビジュアル>ではなく、<テキスト>に貼ってください

※埋め込みたい動画の上で右クリック→「埋め込みコードをコピー」

③コードを付け足し

②のコードの前後に下記の黄色いラインのコードを追加してください。
これで、CSSに追加したコードと関連付けることができます。

<div class=”yt”><iframe title=”YouTube video player” src=”https://www.youtube.com/embed/pfFCN1lGqPw” width=”1280″ height=”720″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>

すると、下記のように余計な部分が消え、長方形に埋め込むことができます。

一度CSSに貼り付けてしまえば、あとは、ブログにYouTubeのコードを貼り付けるたびに③のコードだけ貼り付けていけば大丈夫です。

最後までお読みいただきありがとうございました。