Youtubeの再生リストからランダムで動画を表示する

2018.12.10　switch文に書きなおした( ˘ω˘)φ_

---

例えば、この再生リストの動画を、ブログに埋め込みたい場合は [共有]ボタンから「埋め込みコード」を取得すればよいのだけど、このコードだと常に最初の動画が表示されます。

これをランダムで表示するようにできないかな～、と色々いじってみたら案外簡単にできたので、一応メモっておきます( ´ー`)φ_

&index="数字" をつける

取得したコードのURLの後ろに「&index="数字"」をつけると、指定した番号の動画が表示されるぽいです。「&index=0」で1つ目の動画が表示されるぽいので、

<iframe width="640" height="360" src="https://www.youtube.com/embed/videoseries?list=PLoX6v6ryG5CxZhoNKRM3yzIJ5E43rXXh5&index=17" frameborder="0" allowfullscreen></iframe>

だと、１８個目の動画が表示されます。

このURLをクリックしてみれば分かると思いますヽ(´ー`)ノ

この部分をランダムにする

後は、じゃばすぷりくとでランダムにするだけです( ´ー`)φ_

ついでなんで、複数のYouTubeのリストやSoundCloudからランダムでひとつ表示するようにしてみました（現在、ページ上部で表示中のやつ）。

ちなみに、じゃばすぷりくとの勉強はやってないので、記述的に正しいのかは分かりません。まぁ参考までにヽ(´ー`)ノ

//設定
 var number = 10;    //switch用のランダム整数（最新のプレイリストを稀によく表示するために大きめの数値を設定しておく）

 //ここから処理
 number = Math.floor(Math.random()*number);    //0以上number未満の数値をランダムで生成する
 switch (number) {
  case 0: document.write('<iframe frameborder="no" height="144" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/54617644" width="256"></iframe>'); //SoundCloud (高さ315で3曲, 400で6曲表示)
   break;
  case 1: randomYoutube('PLoX6v6ryG5Cxb-jFugrF4tzNAnjS6ukHB', 5);  //Vocaloid。動画数は5
   break;
  case 2: randomYoutube('PLoX6v6ryG5CxZhoNKRM3yzIJ5E43rXXh5', 200); //DOA5LR。動画数200ないけど200でよさげ
   break;
  case 3: randomYoutube('PLoX6v6ryG5CyGCVYN4pyBCFg3Zi-eG3a4', 50); //DOA5LR-TA
   break;
  case 4: randomYoutube('PLoX6v6ryG5CxlfcyAjQe37RDEmSh4bXqG', 50); //DOA5LR - 縛りプレイしてみた
   break;
  case 5: randomYoutube('PLoX6v6ryG5CwhVFhPqpyG3OWFKJeMTW-o', 50); //DOA5LR - なんやこれ集
   break;
  default: randomYoutube('PLoX6v6ryG5Cy9AHmhrxL4OAx7pSooe2ro', 50); //Game Play
    break;
 }
  
 //YoutubeのリストURLからランダムで表示する関数（listURL=リストのURL, number=リストの動画数）
 var index;
 function randomYoutube(listURL, number) {
  index = Math.floor(Math.random()*number);
  document.write( '<iframe allowfullscreen="" frameborder="0" height="144" src="//www.youtube.com/embed/videoseries?list=' + listURL + '&index='+ index +'" width="256"></iframe>');
 }