ひとばん寝かせたカレーはとてもおいしい

Twitterに載っけられない長文置き場

HTMLに埋め込んだYouTube動画はページ内で再生できない

この間HTMLにYouTube動画を埋め込もうとしたのですが、一部の動画(というか多くの公式系動画)は、HTMLに埋め込みコードを取得して貼り付けても、

 

動画を再生できません

サムネも表示されない

 

こんな感じで再生できないんですよね。ブラウザを変えても挙動変わらず。

はてなブログとかWordPressだと、HTMLでページ内再生できなかった動画もページ内で再生できるんだけど。

 

www.youtube.com

こちらの動画はHTMLでは埋め込めなかった動画です。(布教)

 

これについて調べた結果や、聞いた結果をまとめます。

 

結論:HTML上で埋め込み不許可YouTubeは再生できない

HTML上では、どうしてもページ内で再生できない動画が存在するようです。

確かによく考えてみれば、今の時代、Web制作で素のHTMLにYouTube動画埋め込む機会なんてほぼ全く無いので困らないっちゃ困らないけど。

 

現時点で私のChrome検証ツールでコンソールにエラーは出ないのですが、以前は

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.youtube.com/watch?v=OPF5OH8R2d0&feature=youtu.be with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

 ※オレンジ色の部分が任意のYouTubeリンクになると思います

 

というエラーが出て、ブロックされていました。

いまの私のChromeは教えてくれないのですが、どうやらCORB(クロスオリジンリードブロッキング)が悪さをしているようです。

CORBについては難しくてよくわからないので↓

 

asnokaze.hatenablog.com

 

YouTube動画の埋め込みリンクを取得してそのままHTMLに貼り付けても、フロントエンド(HTML)からレスポンスを投げるとブロックされてしまいます。

しかしこれにはYouTubeの設定も関係しているようで、動画の所有者が埋め込みを許可していると、そのまま埋め込める場合もあります。

 

表示できる動画もある

表示できる動画もある

MusicVideoなどは埋め込めないことが多かったですが、ご覧のように進撃の巨人展のCMはサムネも表示され、埋め込むことができています。ページ内で再生もできました。

これは恐らく、動画の所有者が埋め込みを許可する設定にしているものと思われます。

理由はともかくとして、HTMLに頑張っても埋め込めないYouTube動画がある、という結論だけがこの記事でお伝えしたいことです。

頑張って調べたけど結局「答え」がなかったので。

「答え」は「無理」でした。

対処法

思いつく解決策をいくつか挙げます。

 

画像リンクにする

サムネイルに準ずる画像を用意して、その画像をaタグで囲んでリンクにしてしまう作戦。

文字リンクにする

ダサいから多分誰もやりたくないけど、普通に文字のリンクを貼り付けてしまう作戦。

 

リンクの作り方はサルワカさん見てください

saruwakakun.com

 

WordPress化する

フロントエンドでブロックされてしまうのなら、サーバーサイドにしてしまえばいいじゃないか作戦。

WordPress化すれば見た目を損なわず、動画をページを再生できるようになります。

しかしこの作戦では、ファイルを受け取った側がPHPのローカル環境を構築していないと見ることができないので、需要とミスマッチのはず。

それからこちらも環境構築をしていないといけない。

ていうかそこまでしてYouTube埋め込まなきゃいけないってどういう事情?

 

諦める

「できませんでした」と言う作戦。

HTMLにYouTube動画を埋め込んで再生できなかったから殺された人は聞いたことがないので、多分大丈夫です。