Skip to content

Instantly share code, notes, and snippets.

@jirolabo
Last active September 30, 2016 07:21
Show Gist options
  • Save jirolabo/501eff557af51cb888a45e5ecb651863 to your computer and use it in GitHub Desktop.
Save jirolabo/501eff557af51cb888a45e5ecb651863 to your computer and use it in GitHub Desktop.
Youtube IFrame Player API のプレイヤーをページ背景にしする(音量はミュート)
<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' // 1動画のみでループ再生する場合、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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment