Lazysizesのvideo embedをお使いの方へ修正提案

vedeo embedで変更が必要だと思われる箇所

• 自動再生を有効化する
• サムネイルの表示位置を修正する

上記についての説明と対策をお伝えします。JSファイルの修正が必要 になりますので、CDNの利用はできなくなりますが、事のついでですから画像のlazyload(基本ファイル)とvideo embedプラグインのファイルをこの際一つにまとめてしまうと良いですね。

自動再生を有効化

この記事を書いている2019年2月27日現時点でChromeの最新バージョンは 72 です。その一つ前の 71 から 音声付き動画コンテンツの自動再生に関するポリシー変更 が適用されています。

Autoplay policy in Chrome - Chrome Developers

Learn best practices for good user experiences with the new autoplay policies in Chrome.

developer.chrome.com

YouTubeで、というわけではなく動画全般への規制です。主に 広告 ですね。要はユーザーの意思決定と無関係に勝手に音声を流すな、ということです。これはGoogleのポリシー変更なので、ブログサービスの不具合やOS・ブラウザの不具合ではありませんし、ましてテンプレートの不具合でもありません。

ただ、自動再生が完全に封殺されたということではなく、過去に掲載済のパラメータで以て autoplay=1 とだけ指定してあるものについては既に自動再生が無効化されているはずです。これから新規で掲載するものについては 埋め込みコードの内容が変更されている ため、まぁ有効っちゃ有効かなぁ (´・ω・｀)

新コードによる自動再生許可

旧コード

<iframe width="560" height="315" src="動画URL" frameborder="0" allowfullscreen=""></iframe>

新コード

<iframe width="560" height="315" src="動画URL" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

旧コードの方の細かい内容は忘れてしまいました(ぉい)が、こんな感じではなかったかと。コード内容自体はもう随分前に変更されています。が、Chromeで新ポリシーのローンチが行われたのがバージョン71。YouTubeの方は既に準備を整えていた、という感じです。

既存のautoplay適用YouTubeが自動再生されなくなった、という方はこれが原因です。ですが今回そこは深く追求しません。記事の主旨が違うので ^^;

で、video embedの方なんですが、サムネイル画像の上にオーバーレイを表示し、そのオーバーレイのボタンをクリックすると動画のiframe要素の取得が始まりますよね。そのiframeにautoplayが指定されているため途切れなくといういうか、ワンクリックで動画が再生されているように見える、という仕組みです。ところが現在ではallow属性の中にautoplayに関する内容が無いとパラメータが無効になりますので、2クリック必要になってしまいます。そこを修正したいと思います。

コード修正

b.innerHTML で検索すると2箇所ヒットします。最初のものは Vimeo に関するコードなので今回は割愛。修正対象は2箇所目の方。こちらが YouTube です。

b.innerHTML='<iframe src="'+n.replace(k,c)+d+'" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="640" height="390" allowfullscreen></iframe>',b.removeEventListener

* 注) 紫の部位はv5.1.1では +q.replace(k,c)+d+ などバージョンによって異なることがあります。

文字が白い部位はもともと記載されている内容です。挟まれている内容を緑文字の通り修正。ここを修正すれば既存のものも自動再生が復活します。パラメータのautoplayブーリアン(真偽値)はもともとtrue(1)になっていますので修正不要。

ただし今後のことはわかりません。もしかしたら自動再生はmutedの真偽値がfalse(0)だと無効になるかもしれません。つまり自動再生はミュート以外許可しない、とかになるかも。まぁ、そこはわかりませんのでとりあえず今のことだけ考える(笑)

サムネイルの表示位置を調整する

こちらはYouTubeの都合でズレて表示されるようになってしまいました。下に落ちているというか、上部に黒い背景が出ます。それを中央合わせに補正して黒背景を見切れさせるよう修正します。

コード修正

b.style.backgroundImage で検索。こちらも2箇所ヒットしますが2箇所目の方が対象です。

b.style.background="url("+m.replace(k,a)+") center center /cover no-repeat",b.addEventListener

* 注) 紫の部位はv5.1.1では +n.replace(k,a).replace(l,d)+ などバージョンによって異なることがあります。

まとめ

作者による修正がいまのところ入っていませんので取り急ぎの対処として。次期バージョンで対策があると思いますので、その時には改めてファイルを更新するということで。

YouTubeはGoogleのお膝元であるにも関わらずChromeで大量のエラーが指摘されてストレス(笑)
動画のlazyloadingは非常に軽いですね。同ページ内に複数の動画掲載を行う場合には是非使って頂きたいなぁ、と思います。

以上video embedの修正についてでした。