タグ別アーカイブ: Youtube

【サイト管理者向け】スマホサイトに埋め込まれたYoutubeが再生できない場合の対処法

このページはサイトを作る方向けの情報です。サイトを閲覧している方向けの対処法は掲載しておりませんのでご注意ください。

自社のサイトにYoutubeにアップしたPR動画などを埋め込みたいことがあると思います。
埋め込んでみていざ確認してみると……「この動画は現在再生できません」と表示されるケースがあります。

これは埋め込む側の設定で対処できるケースがあるので、その対処法をまとめました。
※今回は検証した環境はiPhone5s(iOS 7.0.4)のSafariです。

Youtubeの動画の埋め込み方法

すでにYoutube動画の埋め込みコード取得の方法を知っている方はこの部分は読み飛ばしていただいてOKです。

1.埋め込みたい動画を表示する

まずは埋め込みたい動画のページを表示してください。
今回は説明用サンプルとして「https://www.youtube.com/watch?v=KyCYyoGusqs」を使っています。

2.動画の下にある「共有」タブをクリック

step2

3.「共有」タブをクリックして表示された部分にある「埋め込みコード」をクリック

step3

4.表示されたHTMLコードをコピーして、埋め込みたい部分に貼り付ける

step4

以上が基本的なYoutubeの動画を埋め込む際の手順になります。

埋め込んだ動画が再生されない!

ここからが本題です。
おそらく埋め込んだ動画はPCでは再生できると思います。
(PCでも再生できないケースがあるようですが、ここでは省略します)

Youtubeの埋め込みの標準設定

Youtubeから動画を埋め込む際の標準の設定は以下のようになっていると思います。
動画のサイズ:560×315
動画が終わったら関連動画を表示する(チェックあり
プライバシー強化モードを有効にする(チェックなし)
以前の埋め込みコードを使用する(チェックなし)

標準設定のままの動画


再生すると私の環境では「この動画は現在再生できません」と表示され、埋め込んだ動画が再生できませんでした。

解決方法

解決方法は至ってシンプルでした。
「プライバシー強化モードを有効にする」にチェックを入れる
これだけです!
answer

「動画が終わったら関連動画を表示する」にチェックを入れるかどうかはどちらでも大丈夫だと思います。
「以前の埋め込みコードを使用する」はチェックを入れない方がいいと思います(未検証)。

埋め込みコードを変更した後の動画

再生を始めるとYoutubeアプリが立ち上がって再生されました。

おわりに

動画のソースが「プライバシー強化モードを有効にする」にチェックを入れる前は、
www.youtube.com
だったのに対して、チェックを入れた後は、
www.youtube-nocookie.com
になっているようです。

Youtubeは動画をアップロードしてサイトに埋め込む際に非常に役に立つサービスですが、サイトに埋め込んでも実際に再生できないと意味がありません。
ちょっとした設定を変えるだけで再生可能になるので覚えておくと何かの時に役に立つかもしれませんね!

おまけ

スマホ向けのページに埋め込む場合にはプレイヤーのサイズを以下のようにしておくと良さそうです。
appendix
「動画のサイズ」の部分を「カスタムサイズ」にして、左側の入力ボックスに「320」と入力すればOKです。
(右側の入力ボックスには自動でサイズが計算されます)
iPhone向けだとこの設定がいいのではないでしょうか。