Help us understand the problem. What is going on with this article?

【公開】Qiitaに投稿したYoutube動画を自動再生させる!

一応、私の記事を始めた見た人のために
自動再生させるやつを以下に掲載する。
 




 
 
 
CODEPENでYoutube動画を掲載する方法については
前回の記事をご参照くだされ。
 
【説明しよう】これがQiitaの投稿に動画(Youtube)を埋め込んで再生させる方法だ。
 
 
  
 
 
 

えーと、そしたら本題。
CODEPENの使い方が分かってる人ならもう答えを見てしまったかも知れないんだが、
Youtubeを再生させるには、
「CODEPENのiframeに記載するsrcのパラメータ」を変えることで実現できる。
 

ちなみに【公開】などと偉そうに書いてるが、この情報は検索するといっぱい出てくる。
「いいね」が欲しいので書くことにした。

「なーんだ他に情報があるんだから見なくてもいいや〜」って人はそちらを見に行くのも良い。
たくさんの情報がある。

しかし、
そんな人にも最後にこの「心の叫びボタン」だけは押して行ってほしいと思う。


 
 
 
 
 
 
 
さて、続きだ。
パラメータのパターンをちょっとずつ検証して行こうと思う。
 
 
 
 
 

1. パラメータなし

まずは何もなしの状態。

<iframe src="https://www.youtube.com/embed/k0If_tMOez0" width="790" height="450" />

 
 
このように自動再生はされない。
 
 
 
 

2. 自動再生のパラメータを追加

自動再生のパラメータはsrcの後に?autoplay=1を足してやる。
って調べたら書いてたから追加してみたんだが上手くいかない・・・

<iframe src="https://www.youtube.com/embed/k0If_tMOez0?autoplay=1" width="790" height="450" />

 
 
実はこれ、Chromeだとautoplay=1だけじゃダメらしい。
(いきなり音が出るのが困る場合があるからじゃろう)
他のブラウザでは検証してないので、どのブラウザがどうってのは分からん。
 

で、また調べたら
「Chromeではミュート状態じゃないと自動再生されない」んだそう。
ということでパラメータにミュート設定であるmute=1を追加してみる。

<iframe src="https://www.youtube.com/embed/k0If_tMOez0?mute=1&autoplay=1" width="790" height="450" />

これでようやくChromeでも動く自動再生されるようになったってわけ。
 
 




 
 
 
一応これで完成だが、
せっかくなので他のパラメータも試してみる。
 
 
 
 

3. プレーヤーコントローラーをなくす

controls=0
このパラメータにすると再生・停止しか操作ができなくなる。

<iframe src="https://www.youtube.com/embed/k0If_tMOez0?controls=0" width="790" height="450" />

 
 
 
 

4. 途中から再生する

start=(秒数)
コードでは1000ミリ秒で表すことが多いが、
このパラメータでは1=1秒らしい。

誤差があるって書いてたけど、
これを書いたときは特に気にならなかった。

<iframe src="https://www.youtube.com/embed/k0If_tMOez0?start=10" width="790" height="450" />

 
 
 
 
 
 
 
 
Youtubeを操作するパラメータは他にもメチャクチャあったから、
色々試して見ても面白いかも知れない。
 
 
 
自動再生が全てにおいて「正」ではないが、
目を引くための手段としては有効だろう。
 
目的に合わせてパラメータを組み合わせながら使うと良いんではなかろうか。
 
 
 
 
 
そんな訳で次回は、
パラメータを有効活用した解説記事を書こうと思う。

 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away