Toggle

Design

Youtubeの埋め込み・リンク

現在のWebでは静止画と同じレベルで動画を扱えるようになっています。
「同じレベル」というのがわかり難いかもしれませんね。
以前は「動画」をWebサイトにアップしたり、自身のサイトで配信しようと思うと、インフラを含めなかなかの技量とお金が必要でした。

現在では、twitterやFacebookでも動画のサポートが行われており、TV番組のアーカイブやライブラリも充実しています。近いうちに物理的なDVDレンタルという仕事がなくなってしまうのではないかと感じるくらいの勢いがあります。
さて、そんな動画を扱うサイトでもやはり最大手となるのは「Youtube」。そしてYoutubeのコンテンツをサイトにどう配置するのかがSEOに影響を与えるほど有意義なコンテンツとしてのポジションを確立しています。

そんなYoutubeのリンクを作成する際、大きく2つの方法があります。
・プレイヤーごと埋め込む
埋め込む際のコードはYoutubeの画面から取得できます。
SnapCrab_2015-7-31
再生画面の下部にある「共有」
「埋め込みコード」

更に下の「もっと見る」から細かく設定できます。

詳しくはヘルプにもあります。
動画と再生リストを埋め込む(Youtubeヘルプ)(https://support.google.com/youtube/answer/171780?hl=ja)

・リンクでポップアップさせる
Lightboxのようなプラグインを使ってポップアップさせる場合も、先のリンクアドレスを使ってリンク先を記入します。

また、リンク用にサムネイル画像が必要ですが、それもYoutubeから取得できます。
(つい最近まで知りませんでした)
サムネイル画像のアドレスはこのようになります↓
動画のリンクアドレスがこの場合、
<a href=https://www.youtube.com/embed/smgWkbct6Tg?rel=0&amp;controls=0&amp;showinfo=0″ class=”fancybox-youtube”>

サムネイル画像
<img src=”http://img.youtube.com/vi/smgWkbct6Tg/mqdefault.jpg”>

Return Top