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

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

カスタマイズ
2020/02/05 12
vanillaice (Akira)
vanillaice (Akira)
Instruction YouTube

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

Android機種を持っていないので未確認ですが(iPhone検証済)、もともとできるんじゃないですかね (´・ω・`)
説明・目的がわかりづらい方は以下のYouTube動画をiPhoneで再生してください。

* 動画を差し替えましたのでスクリーンショットの様子と異なりますが解説内容は同じです。

パラメータ「playsinline」

playsinline というパラメータがスマートフォンでの全画面を制御するものです。で、このパラメータを使えばできるんですが、使い方とそしてパラメータの基本的な使い方も初心者向けに説明しようと思います。

まずは「埋め込みコード」を取得

「音楽タグ」ではないですよ。これはでたらめ用語です。埋め込みコード と言います。

① 共有をクリック

② 埋め込むをクリック

③ コピーをクリック

実際のコードがこちらです ↓

<iframe width="560" height="315" src="https://www.youtube.com/embed/DiItGE3eAyQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

緑の部位が動画を特定するアドレス。この後ろに各種パラメータをくっつけていきます。

パラメータ追加の仕方

埋め込みコード中の src属性 の値、緑部位は https://www.youtube.com/embed/DiItGE3eAyQ です。このすぐ後ろに ? を追加(スペースなし)し、続けてパラメータ playsinline を追加、そしてこのパラメータの真偽値(true or false)を追加します。=1
以下のようになります。

https://www.youtube.com/embed/DiItGE3eAyQ?playsinline=1

パラメータ追加法則

パラメータを複数追加したい場合、1つ目のパラメータは ? で、それ以降は &amp; で繋ぎます。& でも良いんですが、FC2のエディターの特徴を考えると &amp; と記すのがベター。最初だけがハテナ、2つ目以降はアンパサンドで繋ぐ、というのがパラメータの基本です。これはYouTubeだけに限りませんので覚えておくと便利です。

そして boolean(ブーリアン, 真偽値)0false で言い換えれば「NO」「OFF」という意味ですね。そして 0以外true で言い換えれば「YES」「ON」です。たいていの場合0以外とは 1 のことです。真偽値は直前に = で繋ぎます。このbooleanについてもYouTubeに限りません。例えば手動スライダーのついているテンプレートのスライダー用JSのコード内に autoplay=0 とある場合、autoplay=1 に変更すれば自動再生されるかもしれません。パラメータはそれぞれ固有なのでautoplayという単語とは限りませんが。

パラメータはデフォルト値が用意されています。true, falseのどちらがデフォルトかは調べる必要があります。デフォルト値を採用するパラメータについては記述の必要は不要です。つまりデフォルト値を変更するときだけパラメータ操作の必要が生じます。

パラメータの追加手順と真偽値を覚えておくとFC2テンプレートカスタマイズがお好きな方にとってきっと役に立ちますよ。

その他使いそうなYouTubeパラメータ

各種パラメータについてはYouTubeが公開していますのでご参照ください。

パラメータ法則を知っていれば簡単にできるはずです。私がよく利用するパラメータをサンプルコードに組み込むと

<iframe width="560" height="315" src="https://www.youtube.com/embed/DiItGE3eAyQ?playsinline=1&amp;rel=0&amp;iv_load_policy=3" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

こうですね。「全画面制御あり」「関連動画表示なし」「アノテーション表示なし」を意味します。
* アノテーション = 動画上に表示されるリンクや補足情報

以上が基本的な使い方です。ここからは特殊なケースについて。

弊テンプレートのYouTubeレスポンシブを利用する場合

埋め込みコードを box-for-video クラスを持つ div要素 で囲ってください。

<div class="box-for-video" style="max-width: 600px; margin: auto;"><iframe width="560" height="315" src="https://www.youtube.com/embed/DiItGE3eAyQ?playsinline=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>

style属性style="max-width: 600px; margin: auto;" は任意です。このサンプルコードの場合は横幅を最大600pxまでに制限 + センタリングの設定をしています。スタイルシート内の .box-for-video のルールセットにこれらの指定を追加している方はstyle属性を書く必要はありません。念の為。

Lazysizesのvideo embedの場合

この場合パラメータを書くのはカスタムデータ属性内です。サンプルコードを利用すると以下の通り。レスポンシブ用のbox-for-videoも入れています。

<div class="box-for-video lazyload" data-youtube="DiItGE3eAyQ" data-ytparams="playsinline=1" style="max-width: 600px; margin: auto;">
  <button class="play-btn"></button>
</div>

他のパラメータを利用するときはアンパサンドで繋ぎます。

data-ytparams="playsinline=1&amp;rel=0"

まとめ

YouTubeはパラメータの追加・削除や仕様変更、規約変更の頻度が割と高いのでずっと使えるとは限りませんが、動画を全画面再生させたくない、という方はお試しください。

 12

There are no comments yet.
hige
Android

ご無沙汰しております。

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

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

2020/02/05 (Wed) 21:07
ススム
こんばんは

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

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

2020/02/06 (Thu) 21:36
vanillaice (Akira)
Akira
To higeさん

higeさん、こんばんは ('0')/

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

2020/02/09 (Sun) 19:27
vanillaice (Akira)
Akira
To ススムさん

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

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

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

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

2020/02/09 (Sun) 19:54
ススム
To Akiraさん

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

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

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

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

2020/02/09 (Sun) 22:15
hige
初期設定は拡大なし

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

2020/02/10 (Mon) 14:41
vanillaice (Akira)
Akira
To higeさん

higeさん、こんばんは ('0')/

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

2020/02/10 (Mon) 20:36
vanillaice (Akira)
Akira
To ススムさん

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

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

2020/02/10 (Mon) 20:38
hige
協力

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

2020/02/10 (Mon) 20:50
ススム
iframeでエラー表示

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

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

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

2020/02/19 (Wed) 10:58
ススム
自己解決しました

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

2020/02/19 (Wed) 11:09
vanillaice (Akira)
Akira
To ススムさん

こんばんは ('0')/

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

2020/02/19 (Wed) 21:44

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ