jirolabo/youtube_background.html

## youtube_background.html
<html>
<head>
<style>
  #bg-player, #bg-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #bg-player {
    z-index: -2;
  }
  #bg-pattern {
    z-index: -1;
  }
  .bg-dot {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAAEFsT2yAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMjg1ODkxMS1iMDI1LTU1NGYtOTI5ZS03MmUzODQzMmFhZmMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRCMUFDMDU3M0ZGMTFFNjhEQTVFNEIzOUUwNTI4QjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRCMUFDMDQ3M0ZGMTFFNjhEQTVFNEIzOUUwNTI4QjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Y2VkYmJlN2MtNzgyNS0zODQ4LThiYmEtOWMzMDlmMzM3MjliIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6NmJlZGE2MzUtNzNlMy0xMWU2LTg2NzEtOTk4Yjg2YjRhYmQ1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+UjVnIwAAABtJREFUeNpiUFJS+g8QQAxAggEgwBhBBBD8BwAeZAMywMQ83AAAAABJRU5ErkJggg==');
  }
</style>
</head>
<body>
  <div id="bg-player"></div>
  <div id="bg-pattern" class="bg-dot"></div>
  <button>ドット画像の表示切り替え</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    function onYouTubeIframeAPIReady() {
      new YT.Player('bg-player', {
        videoId: 'uVS31vwHvDw',
        playerVars: {
          autoplay: 1,
          loop: 1, // ループ再生
          controls: 0, // コントロールを表示しない
          playlist: 'uVS31vwHvDw' // １動画のみでループ再生する場合、videoIdと同じ値を設定
        },
        events: {
          onReady: onPlayerReady
        }
      });
    }
    function onPlayerReady(event) {
      event.target.mute();  // ミュート
    }
    $("button").click(function () {
      $("#bg-pattern").toggleClass('bg-dot');
    })
  </script>
  <script src="https://www.youtube.com/iframe_api"></script>

</body>
</html>
	<html>
	<head>
	<style>
	#bg-player, #bg-pattern {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	#bg-player {
	z-index: -2;
	}
	#bg-pattern {
	z-index: -1;
	}
	.bg-dot {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAAEFsT2yAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMjg1ODkxMS1iMDI1LTU1NGYtOTI5ZS03MmUzODQzMmFhZmMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRCMUFDMDU3M0ZGMTFFNjhEQTVFNEIzOUUwNTI4QjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRCMUFDMDQ3M0ZGMTFFNjhEQTVFNEIzOUUwNTI4QjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Y2VkYmJlN2MtNzgyNS0zODQ4LThiYmEtOWMzMDlmMzM3MjliIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6NmJlZGE2MzUtNzNlMy0xMWU2LTg2NzEtOTk4Yjg2YjRhYmQ1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+UjVnIwAAABtJREFUeNpiUFJS+g8QQAxAggEgwBhBBBD8BwAeZAMywMQ83AAAAABJRU5ErkJggg==');
	}
	</style>
	</head>
	<body>
	<div id="bg-player"></div>
	<div id="bg-pattern" class="bg-dot"></div>
	<button>ドット画像の表示切り替え</button>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script>
	function onYouTubeIframeAPIReady() {
	new YT.Player('bg-player', {
	videoId: 'uVS31vwHvDw',
	playerVars: {
	autoplay: 1,
	loop: 1, // ループ再生
	controls: 0, // コントロールを表示しない
	playlist: 'uVS31vwHvDw' // １動画のみでループ再生する場合、videoIdと同じ値を設定
	},
	events: {
	onReady: onPlayerReady
	}
	});
	}
	function onPlayerReady(event) {
	event.target.mute(); // ミュート
	}
	$("button").click(function () {
	$("#bg-pattern").toggleClass('bg-dot');
	})
	</script>
	<script src="https://www.youtube.com/iframe_api"></script>

	</body>
	</html>