iOSの埋め込みYouTubeのコントロールバーがおかしいんだ、という話

アプリではなく、ブログに iframe で埋め込みをしたYouTubeプレイヤーについてです。そして今回の性質上 インライン再生 を指定した場合のグリッチだかバグだか… なんだかよくわからない (ﾟ◇､ﾟ)

インライン再生については以下の記事でどうぞ。

iPhoneでページ内のYouTubeをインライン再生させる方法

タイトルがわかりづらいか (´・ω・｀) ブログ内に掲載されているYouTubeって再生ボタンを押すと動画が専用全画面に切り替わってしまいますよね。それを避けてページ内の一部として再生させる方法です。...

vanillaice000.blog.fc2.com

症状

パソコンは無関係です。モバイルでの再生 に限定されます。

• プレイヤーのコントロールバーの形状がリロードする度異なっている(ランダム出現?)
• コントロールバー自動非表示(hide)後、再度タップしてもバーが出てこない(一瞬現れて消える)

iOSのバージョンは 14.7.1 です。このバージョン自体なんだかんだと不具合があるようで。YouTube埋め込みについては上記以外にも何かありそうですが、今把握しているのはこの2つ。バーの再出現については、非表示になった後10秒程度以内のタップには反応しないことが多々あります。長めに待ってからクリックすると出てくるんですけどねぇ (´・ｪ・｀)

今回、より問題視しているのは コントロールバーの形状 についてです。ある特定のパターンに当てはまる方は非常に困った状況に陥っている、と。本件の情報をお寄せ頂いたサイトさんのリンクを掲載しておきます。imaimaさん、ご協力ありがとうございます :)

BITARX

ITで顧客利益を追求します。

bitarx.jp

コントロールバーの形状

これらは 同じページの同じYouTube動画のスクリーンショット です。リロードする度、AとBがコロコロ入れ替わります。同ページ内に複数の動画がある場合も全部揃ってみたりバラバラだったり。法則性があるようでランダムに2種から選択して表示されているような体感です。気まぐれにやられたらこちとら困るんだがな (;`ｰ´)o みたいな。

何が困るかというと ミュート再生を指定している場合 です。タイプBの方をよくご覧頂くと、スピーカーアイコンが無い ことに気づくかと思います。これ無かったらミュート解除できないのよ (´・ω・｀)

全画面に切り替えると右上にスピーカーアイコンがありますので操作できますが、ならなんのためのインラインよ (;`ｰ´)o

昔はパラメータでコントロールバーのカスタマイズなんかもできたんですが、そんなのフラッシュ時代の話であって、現在は「ユーザーにコントロールバーの形状操作をさせない」という方針のようなのでパラメータも存在しません。なのでパラメータで解決することもできない。困りましたね。コントロールバーの形状に関する情報も公式ページでは見つけられないんですよねぇ (´・ｪ・｀)

まとめ

えっ？もう？って感じですが解決策も何も持たないもので、すみません。 iOSに問題があるかもしれないし、YouTubeかもしれないし、APIに何か異常があるのかもしれないし、原因はいくつも考えられます。そしてこれが一過性の問題なのかどうかもわからない。とりあえず「ミュート再生を辞める」ぐらいしか対策が無いですね。

ミュートについてなんですが、個人的には必要ないんじゃないかな、と思っています。特殊なケースで「autoplay + mute」はあり得るかもしれない。心構えが無いのにページが表示されたらいきなり動画の音声がスマホから… とかは絶対避けたい。とは言え、モバイルではYouTubeの自動再生自体が禁止になっているわけなのでその心配はありません。

「モバイルではミュート推奨」という情報も結構あるんですが、私個人は正直その必要は感じないな (´・ω・｀)
だって動画を自主的にクリックするということは当然音声も出るでしょう。だった動画なんだし。「音量がmaxになっているかもしれなじゃない」とか言われれば、「あー、なるほど」と納得はできますけどね。私の感覚では逆に「あれ？音声が出ないけど何故？」の方が多そうな気がします(笑)

原因も何もわからないので何も情報提供できませんが、うーん、ついでなんで最新のYouTube埋め込みコードを。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

YouTubeは結構頻繁にコードが変わるんですよね。注目点だけ説明しますと、title="YouTube video player" というのが新たに追加されていますよね。Lighthouse検証などをされる方はご存知だと思いますけれども、現在では iframeにはタイトル属性を付けろ とGoogle王がご所望です。音声読み上げ時に「何のプレイヤーであるのか」を明示することでユーザービリティに貢献できるよ、ということです。「だからやると良いよ」ではなく「やれよ」って感じかな(笑)

ですからね、過去に掲載したツベでtitle属性の無いものについてはLighthouseで減点されますね。じゃあ全部修正するのかと言われれば、「お前がこのコードだって言ったんじゃん (;`ｰ´)o」なので、私はやりません(笑)
例え王であっても自身の抱えるコンテンツにも警告は発する、と。webの状況は刻一刻と変わりますので仕方がないですね。どこかで妥協点を見つけるしか。ちなみにFC2ブログの「更新通知ボタン」も警告対象だったんですが、運営さんがtitle属性を足してくれたようですよ。

本件で何か情報をお持ちでしたら是非お寄せください。私の方でも何かわかればお知らせしたいと思います ('0')/