js-youtube-autoplay


  view source
  JavaScript
  //https://developers.google.com/youtube/iframe_api_reference?hl=ja

//view-source:http://blog.8bit.co.jp/wp-content/uploads/2017/10/1025/
/*
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
*/
var ytPlayer;
/*
function onYouTubeIframeAPIReady() {
  $('#demo').inViewAutoplay({
    autohide: 1,
    modestbranding: 1,
    rel: 0,
    quality: 'hd720'
  });
}
*/

// YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player(
   'demo', // 埋め込む場所の指定
    {
      width: document.body.clientWidth,
      height: window.innerHeight,
      videoId: location.search.substring(1) || 'vS5jzBVHFn0', // YouTubeのID
      events: {
        'onReady': onPlayerReady,
      },
      playerVars: {
                rel: 0, //最初の動画の再生が終了したときに、プレーヤーに関連動画を表示するかどうか　0:表示しない 1:表示する　デフォルトは1   
                playlist: '63D43-xGZdo', //次に流すyoutubeにアップした動画のID指定
                loop: 1, //ループをするかどうか　0:ループしない 1:ループをする　デフォルトは0         
                controls: 1, //コントローラーを表示させるか　0:コントローラー無し 1:コントローラー有り　デフォルトは1
                autoplay: 1, //オートで再生させるか　0:オートで再生させない　1：オートで再生する　デフォルトは0
                showinfo: 0 //上部の動画タイトルを表示について　0：タイトルを表示させない　1：タイトルを表示させる　デフォルトは1
            }
    }
  );
}
function onPlayerReady(event) {
  event.target.playVideo();
// ※ muteでないと自動再生できない
  event.target.mute();
// ※ 時間差でもダメ
  setTimeout(function(){
    event.target.setVolume(50)
    event.target.unMute()
  }, 6000);
}


  CSS
  
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-youtube-autoplay/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。