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

Android

ご無沙汰しております。

そうです。Androidではもともとページの一部分として表示されます。PCと同じです。
ver 5.0.2　と　9 で確認しました。

rel=0 はずっと使ってきました。
playsinline は、私の場合1/4がiPhoneユーザーなので設定しておく方が親切かも知れませんねぇ。ただ、画面の大きさを考えるとそうでもないのかもとも。

こんばんは

この方法で貼り付けた方が、記事の一部という感じがあって良いと思いました。

ちなみに、こちらの記事内の動画ではlazysizesを使用しておられないようですが、やはりスマホからワンタップで再生されない点を考慮しての事でしょうか？
この件については、以前から気になっておりましたのでAkiraさんの個人的な考えをお聞かせいただいて、参考にしたいと思います。

To ｈｉｇｅさん

ｈｉｇｅさん、こんばんは ('0')/

Androidはできたんですね。iPhoneは確かiOS10で一時期できたんですが、すぐにできなくなって。ツベ側のデフォルト値の変更だったんじゃないかなぁ。たぶん (´・ω・｀)
記事を読みながら聴けるのである種の動画には便利かもしれませんね。拡大はすぐにできるので初期設定は拡大なしに指定しておいた方が親切なのかも。

To ススムさん

ススムさん、こんばんは ('0')/

> スマホからワンタップで再生されない点を考慮しての事でしょうか？〜

video embedは特殊な内容であって誰でも反映されるわけではないので、あくまでも「パラメータ」「誰もが使える」という点を伝えたい場合にはサンプルに適さない、というだけです。
video embedをサンプルにしてしまうと「見た目が違う」「挙動が違う」ってことになってしまいます。
ただそれだけです(笑)

スマホで2タップ必要な件については、これはもう仕方がないですよね。YouTubeのポリシーが「スマホでの自動再生非推奨」である限りどうにもできません。速度をとるか利便を取るか、です。
iframeも遅延はできるので、タップ数が気になる場合はvideo embedではなく単純にiframeをlazyさせる方法を使うと良いと思います。速度面では劣りますが、10とか20といった数を同時掲載しなければそんなに問題にはならないのではないかな (´・ω・｀)

To Akiraさん

こんばんは、ご回答ありがとうございます。

なるほど、この記事の内容に沿った形だからだったんですね。
質問の仕方が変でしたが、さり気なくフォローいただき感謝します。

video embedは使いたいのですが、iframeをlazyさせる方法も試してから方針を決めたいと思います。

---
またまた余計な事ですが、2番目の見出しの「埋め込みコード」の取得手順で、3番目の「コピーをクリック」の前に③をつけ忘れていらっしゃるのではないでしょうか。

初期設定は拡大なし

　確かにそうですね。私はYoutubeはいくつも貼ってないので、治しておこうかなぁと思ってます。
　でも逆にiPhoneを持ってないので確認しようがないですねぇ。（笑）

To ｈｉｇｅさん

ｈｉｇｅさん、こんばんは ('0')/

そうなんです。私もAndroidを持っていないので確認しようがない ^^;
お互い別機種なので協力しあえれば嬉しいです(笑)

To ススムさん

ススムさん、こんばんは ('0')/

お返事が前後してしまいました。ごめんなさい。
番号の件、お気づき頂いてありがとうございます。今訂正しました。

協力

勿論、気づき次第協力させてもらいます。
なんなりとお申し付け下さりませ。＜(_ _)＞

iframeでエラー表示

いつもお世話になります。

この記事のコメントでお尋ねしたYouTubeをスマホでもワンタップで再生するために、video embedを使っていたのをiframeをlazyさせる方法で試してみました。
スマホでもワンタップ再生させることが出来ましたが、バリデートチェックでエラー表示されました。
https://lifeisfantastic.blog.fc2.com/blog-entry-40.html

私の書き方がおかしいのだと思いますが、何処を修正すればよいのか分かりません。
お忙しいところお手数ですが、お時間のある時にでも見ていただけると助かります。

自己解決しました

すいません、 frameborder="0"と書いていたのが原因だったようで、削除したらエラー表記は解消されました。

To ススムさん

こんばんは ('0')/

解決済ということで大丈夫でしょうか。お疲れ様でした :)

コントロールが２種類ある

こんばんわ。
Youtube動画インライン再生で色々調べているうちにここにたどり着きました。

Youtube動画をインライン再生でwebページに設置しているとき、iphoneで見た時ですが、リロードの度にランダムでコントロール（再生や停止ボタン、音声ボタン、進捗バーが表示されるエリア）が異なる形で表示されます。（パソコンで見た場合はそのようにはなりません。）

・長細い音声ボタン(スピーカのマーク)があるタイプ（Aタイプと呼びます）
・動画と一体になったようなデザインで、音声ボタン(スピーカのマーク)がないタイプ（Bタイプと呼びます）

どちらかが出ます。

法則性は見いだせず、リロードする度にランダムでどちらかが表示されます。

このページの一番上の動画、Archive - Bulletsの動画もまさにそのようになります。


何が困るかといえば、Bタイプが出た場合、音声を消せない（ミュートで開始した場合は音声を出せない）のです。

Youtubeのドキュメントなども見るのですが、controlsというパラメータでコントロールの表示非表示を変えれる、fsでフルスクリーンアイコンの表示非表示を変えれるということは分かりましたが、音声ボタンだけ表示非表示を切り替えたり、コントロール自体に２種類あることは書かれていないようでした。

もし何か分かりましたらコメントを頂けますと嬉しいです。

To imaimaさん

こんばんは。

正直私もよくわからないんですー (´・ｪ・｀)
iOSのバージョンが私と同じだとすると「14.7.1」だと思うんですが、youtubeに限らず色々なグリッチがあるようで。youtubeに限定すると「コントロールバー自動非表示後、再度バーを出そうと思っても、数秒(10秒程度)待たないとタップしても出てこない(一瞬出てすぐ消える)」とかもあります。
そしてyoutubeはyoutubeでこのところ頻繁に仕様を変更・削除しています。埋め込みコードの内容もコロコロ変わってる ^^;

個人的にはiOSとyoutubeのAPIになにか問題があるのかなぁ、と思っているのですが。
確かにミュート指定だと困りますよね。スピーカーアイコンが出ない方は旧タイプのコントロールバーのような気がするんですが、確かに公式ページにも明記されていないようです。
とりあえずiframeなのでパラメータが無いことにはどうしようもないというか。私の方でも情報を追いかけてなにか分かり次第記事にしたいと思います。
お役に立てず申し訳ないです (*_ _)

To Akiraさん

コメントを頂き誠にありがとうございました。

やはりiOSやYotube api側の問題で、こちらのパラメータ指定でどうにかできそうではなさそうですね。

私の方でも引き続き調査して、何か分かりましたらここにコメントをさせて頂きます。

今後とも、どうぞよろしくお願いいたします。

To imaimaさん

こんにちは ('0')/
こちらこそ情報をお寄せ頂いて感謝します。よろしくお願いします :)