YouTubeの挿入方法 | サロンのホームページ制作 Healing Solutions

記事にYouTubeを挿入する場合は、通常は「埋め込みタグ」というの利用すると思います。

例えばこういう感じのものです。

スクリーンショット 2016-01-12 18.47.42

<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/HpMG6Na6Au4?rel=0" width="560">

 

実際に、そのままタグを挿入してみると、こうなります。

通常の埋め込みタグ

 

通常は、このようにYouTubeを貼り付けられると思います。

スマートフォンでも表示できるように、

弊社のテンプレートでは「iframeは横幅100%で表示する」という設定がされています。

 

ただ、このiframeの貼り付けには、2つの課題があります。

1つは、ページの読み込み速度が遅くなること。

もう一つは、YouTubeでの仕様変更に対応しづらいこと。

 

そこで、弊社ではショートコードというWordPressの機能をつかって動画を表示させています。

[youtube vid=1234567]

 という感じ。

上記では、変換されないように[]を全角にしています。

このコードの書き方については、後ほど触れることにして、

まずはYouTubeの埋め込みタグの課題を2つ見ていきます。

 

 

ページの読み込み速度が遅くなる

こちらが、YouTubeの埋め込みタグをそのまま貼り付けた時のページ速度です。

57pt

スクリーンショット 2016-01-12 18.55.35

 

次に、弊社のショートコードを使って動画を貼り付けた場合。

57pt → 62pt

スクリーンショット 2016-01-12 18.56.52

Googleは最近、ページの表示速度も検索結果に反映させるようになったので、

ページの表示を遅くする要素はできるだけ削るようにしています。

 

動画の表示方法の変更に対応しづらい

以前のYouTubeの埋め込みタグは、長かったのを覚えているかたもいらっしゃるかもしれません。

<object width="640" height="480"><param name="movie" value="http://www.youtube.com/v/1234567?hl=ja_JP&version=3&rel=0"><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/1234567?hl=ja_JP&version=3&rel=0" type="application/x-shockwave-flash" width="640" height="480" allowscriptaccess="always" allowfullscreen="true">

たしか、こんな感じだったのではないでしょうか。

 

 

ここに表示されるはず

しかし表示されません・・

もし、以前のタグを日記の中に記入していたら、

YouTubeの仕様変更に対して、すべての記事を見直して修正しなければいけません。

・・まぁ、「一括置き換え」という方法もあることはありますが・・

 

この時、動画IDだけを利用しながら、システム側でタグを置き換えることで

スムーズなシステム移行が可能となります。

 

また、「設定を変えたいな・・」と思った時には、一括で動画に対して変更を加えることも可能です。

 

実際に動画を貼り付けるコード

では、実際に動画を貼り付ける場合は、どうすればいいかというと、

[youtube vid=HpMG6Na6Au4]

と、記述します。([]は、半角で)

 

すると、こう表示されます。

YouTube Movie

 

この場合、サムネイルは画像を表示しており、クリックされると動画を再生するため、

表示速度を遅めるのを軽減できます。

また、レスポンシブWEBデザインにも対応しています。

 

vidは、「ビデオID」のことです。

これは、YouTubeの動画ページのURLをみるとすぐにわかります。

 

URLの、「?v=」の続きが、その動画の動画IDとなります。

スクリーンショット 2016-01-12 19.28.35

 

もちろん、ショートコードは文章の中にも貼り付けることが可能です。

 

この記事を書いている管理画面上でも、文章の中にショートコードを織り交ぜています。

スクリーンショット 2016-01-12 19.30.33

 

今後、ますますサロンの動画活用が活発になると思われます。

ぜひ、ショートコードを使って動画活用してみてください。

mautic is open source marketing automation