ブログ、ホームページにYouTubeを埋め込む　覚えておくべきタグ

動画はブログやホームページに埋め込もう

YouTubeで動画を公開したら、自分のブログやホームページに貼りつけてみましょう。YouTubeで動画を見つけてもらうには、YouTube検索やウェブ検索、関連動画として見つけてもらうことが多いのですが、ブログに動画を張り付けることで、ブログのユーザーが動画を探す手間が省けるとともに、検索エンジン対策にも有効です。
YouTubeからの誘導とブログでの配信で、2重にコンテンツを拡散することができ-ます。

YouTubeからブログに貼り付ける方法

動画にて解説しました。

貼り付けサイズを変更できます。

ブログへの貼り付けサイズはカスタマイズできます。
カスタマイズを選びサイズを入れると、埋め込みタグにもすぐ反映します。

関連動画を表示させない

関連動画には自分が作成していないコンテンツや他のYoutube動画が表示される場合があります。張付けタグを作るときは、チェックを外して、関連動画を見せないようにします。
追記：　rel＝0　をつけます。　下記のサンプルコードをご覧ください

役立つ埋め込みコード一覧

埋め込みコードに追加するだけで、ブログでの表示が変わってきます。
ここでは便利なタグ一覧をご紹介

動画を最初に戻す「loop」

loop=1
サンプルコード　?loop=1を付ける。このサンプルはたった4秒の動画ですので、すぐに戻ってきます。

 <iframe frameborder="0" height="315" src="//www.youtube.com/embed/F1MFOJFqHsc?loop=1&rel=0" width="560"></iframe>

高解像度で表示させる

vqタグを使って再生解像度のパラメータを指定します。　パラメータは以下の通りです。
高解像度でしたいした場合、閲覧者の回線速度によっては表示が遅くなる場合がありますのでご注意ください。
vq=hd1080　画質1080p 1920ピクセル × 1080ピクセル HD画質
vq=hd720　 画質 720p 1280ピクセル × 720ピクセル HD画質
vq=large　 画質 480p 854ピクセル x 480ピクセル
vq=medium　画質 360p 640ピクセル x 360ピクセル
vq=small　 画質 240p 640ピクセル x 360ピクセル
vq=highres その動画の一番高い品質
※URLに何もパラメーターをつけなければ標準の360Pとなります。埋め込みサイズが小さい場合は機能しない場合もあります。
サンプルコード　?vq=hd720を付ける

 <iframe frameborder="0" height="315" src="//www.youtube.com/embed/wmI1iQOBN4Y?vq=hd720&rel=0" width="560"></iframe>

コントロールバーを非表示にする

・controls=0・・・コントロールバー非表示
・controls=1・・・コントロールバー表示
コントロールバーがないとユーザーに早送り、一時停止などの操作をさせないことになります。

　<iframe frameborder="0" height="315" src="//www.youtube.com/embed/F1MFOJFqHsc?controls=0&rel=0" width="560"></iframe>

アノテーションON

・iv_load_policy=1・・・アノテーションOFF
・iv_load_policy=3・・・アノテーションON
*パソコン表示の時にアノテーションを表示すると効果あり

プレーヤーバーのカスタマイズ

・theme=dark・・・プレイヤーの色を黒に。
・theme=light・・・プレイヤーの色が白（明るいグレー）に。
・color=red・・・シークバーの色が赤に。
・color=white・・・シークバーの色が白（明るいグレー）に。
サンプル

?<iframe frameborder="0" height="315" src="//www.youtube.com/embed/F1MFOJFqHsc?theme=light&color=red&rel=0" width="560"></iframe>

上部のタイトルを非表示にする

・showinfo=0・・・タイトルや評価などの情報を非表示
・showinfo=1・・・タイトルや評価などの情報を表示
マウスオーバー時のタイトルが表示されません
サンプル

<iframe frameborder="0" height="315" src="//www.youtube.com/embed/F1MFOJFqHsc?showinfo=0&amp;rel=0" width="560"></iframe>

これからを組合わせてみました

?以降のコードは

”?vq=highres&showinfo=0&theme=light&color=white&modestbranding=1&rel=0”

highreタグは、そのサイズでの最適な解像度を選択します・
いかがでしょうか？　是非このテクニックをお試しください。

ウェブデモの集客サービス

【無料情報]中小企業のウェブ集客、動画とブログを使った自社メディアの作り方
当社が10年にわたり実践してきたWeb集客、動画活用のノウハウを3つのコンテンツでお届けします。
動画とブログを使った自社メディアの作り方「メールマガジン」

単発相談から6か月の顧問契約まで、4つの基本メニューを用意しています。
１：集客のための動画マーケティング　１社限定１日研修

２：ウェブ集客アドバイス　単発コンサルティング

３：集客動画制作サービス

４：動画マーケティング　運用サービス

★おためしコンサルティング始めました
★その他のご相談はこちらから

ウェブデモ　ソーシャルメディア
フォロー歓迎　毎日　つぶやいています　ウェブデモツイッター
動画集客　Facebookページ

vine　instagram もやってます。フォロー大歓迎

-YouTube使い方
-動画マーケティング, Youtube, コンテンツマーケティング, アイデア