レスポンシブ対応！Youtube動画の埋め込み用ショートコードを作ってみた

WordPressの「ビジュアルエディタ」を使って記事を書いている場合、YoutubeなどのURLを貼り付けるとその場で自動埋め込みしてくれる機能（oEmbed）があります。

YoutubeのURL（https://www.youtube.com/watch?v=xxxxxxxx）を貼り付けると・・

5becb700-194e-4d5e-ba17-1b1aed472486

すぐに、動画が表示される！
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-11-11-38-06

・・しかし、この方法にはちょっと問題があります。レスポンシブデザイン（スマホやタブレットなど、端末の横幅に応じてレイアウトが自動変更されるような作り）の場合、下画像のように動画が記事表示エリアからはみ出してサイドバーなどに重なってしまう残念な現象が発生するのです・・。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-11-11-39-13

この原因は、WordPressがYoutubeの動画URLを自動変換する際に生成するHTMLコード内の iframe タグに横幅640pxの固定設定があるためです。たとえレスポンシブで記事エリアが横幅320pxになったとしても「いや俺は横640pxって言われてるからその大きさで動画表示するぜっ」と頑なに設定通りの大きさを貫いてしまうわけです。

さてこの対処法としては、現状自動埋め込み機能を使わずに自力でHTML＆CSSを書くしかないようです。（そのうちWordPress側で変更があるかもしれませんが）

３つの対処法

1. max-width のみ

最も簡単な方法は、CSSに以下の１行を記述する方法です。

iframe { width: 100%; }

しかしこの場合、「動画が横にはみ出てしまう」という問題は解決しますが、動画の縦幅が固定になります。なので、動画の横幅が短くなっても縦幅が元のままになり、縦長の状態になってしまいます・・。

変な形・・
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-11-13-27-49

2. ラッピングしましょ

そこで一番おススメするのは、以下のようにCSSと記事の動画部分をそれぞれ記述する事です。

CSS

.iframe-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

記事（HTML）

<div class="iframe-wrapper">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/＠＠＠＠＠＠＠＠" frameborder="0" allowfullscreen></iframe>
</div>

これで、動画が縦横比率を保ったまま、ブラウザの横幅に応じて拡大＆縮小してくれるようになります。

※ 記事の「iframe〜」行には、Youtube動画ページの「埋め込みコード」をそのまま貼り付けます。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-11-13-33-13

3. ショートコード化しちゃえ

2. の方法でOKなんですが、こんなに長いコードを毎回書くのは面倒ですよね。間違えそうだし。

それに「ビジュアルモード」で記事を書いている方は、このままコードを貼り付けてもうまく動いてくれません。（「HTMLモード」にする必要がある）

またサイト内で何回も書いた場合、パラメータ変えたいと思ったら全部手直しする必要が出てきます。（Youtube動画の埋め込みは、実は色々パラメータをしこめるんです。自動再生する/しないとか、再生後に関連動画を表示する/しないとか）

そこで、これらをショートコード化しちゃいましょう。functions.php へ以下のように記述します。

function my_shortcode_youtube( $atts ) {
    extract( shortcode_atts( array(
        'id' => '',
    ), $atts ) );

    $html = '';
    $html .= '<div class="iframe-wrapper">';
    $html .= '  <iframe width="560" height="315" src="http://www.youtube.com/embed/' . $id . '?version3&start=29" frameborder="0" allowfullscreen></iframe>';
    $html .= '</div>';

    return $html;
}
add_shortcode( 'yt', 'my_shortcode_youtube' );

そして、CSSは上と同じように記述して、記事に以下のように書いて公開すると、その部分が動画として表示されます。もちろんレスポンシブ時の拡大縮小もOK。

Youtube動画

[yt id="＠＠＠＠＠＠＠＠"]

貼り付けテスト

たった、これだけになります。2. の例では長いHTMLコードを記述する必要がありましたが、こうして独自コードにしておくと簡潔で見やすくなりますね。

※ ＠＠＠＠＠＠＠＠は、Youtube動画URL内のID部に変更してください。下の画像で言えば「embed/」以降の「By20lH0uV7g」がIDになります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-11-13-33-13

独自ショートコードを活用して、手間もミスも減らそう！

ブログやWebサイトでYoutube動画の埋め込みを多用する場合、レスポンシブ対応も考えると 2. のようなHTMLコードを毎度書く必要がありました。

ショートコードにしておけば、簡単にかけるし記述ミスも少なくなります。変更があった時も、functions.phpのコードを１箇所書き換えるだけでOK。

同じことは、二度書かない。

他のケースでも、「毎回同じようなこと書いているなー」と感じた時は、ぜひこの独自ショートコードを用意するというテクニックを思い出してみてくださいね。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA