【インライン再生】iOSでYouTube動画を全画面表示させない方法

iOS Youtube動画 全画面表示させない

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • iframeタグでWebサイトに埋め込んだYouTube動画がiOS(アイフォン)で観る時に再生ボタンを押すと、勝手に全画面表示されるのをどうにかしたい

という方のお悩みを解決します!

全画面表示とインライン再生

YouTube動画を記事に埋め込みたい時、
まずはそのコード(iframeタグ)を取得しますよね。

共有埋め込むコピーの手順で。

Youtube動画を埋め込み

▼▼▼

Youtube動画コード取得

この方法で取得したコードを使って動画を埋め込むと、スマートフォン(iOS)で閲覧した際には自動的に「全画面表示」に切り替わります。

基本的にこだわりがない場合はその表示法で問題ないと思いますが中には、

「動画はページの一部として再生させたい!その記事を見ている時はバッググラウンドで再生させたいのよ」

という方もちらほらいらっしゃるかと思います。

いわゆる、「インライン再生」というものです。

iframeタグのコードにほんの少し手を加えるだけで、インライン再生は実現できますのでご安心を。

以下でその方法を解説します。

*PCで再生する場合は元々インライン再生になってます

パラメーター「playsinline」

結論。
playsinline=1というパラメーターをiframeタグのsrc属性の値の末尾に?に続けて付け加えてあげるだけで動画のインライン再生が実現できます。

コード
<iframe width="560" height="315" src="動画のURL?playsinline=1"></iframe>

とても簡単ですね〜

以下、playsinline=1を指定しないコードと指定したコードを動画つきで載せていますので実際にスマホでタップしてインライン再生になっているか見てみてください。

変更前のコードと動画

デフォルトのコード
<iframe width="560" height="315" src="長いので省略" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

変更後のコードと動画

playsinlineを追記したコード
<iframe width="560" height="315" src="https://www.youtube.com/embed/T23UmFs0JYk?playsinline=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です