3300.me

youtube_bg_window

last update: 2020/12/19
<!doctype html>
<title>title</title>

<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
position: relative;
}
.content {
width: 500px;
height: 280px;
position: fixed;
top: 50%;
left: 50%;
z-index: 3;
margin: -140px 0 0 -250px;
padding-top: 110px;
color: #fff;
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
text-align: center;
box-sizing: border-box;
border: #fff 1px solid;
}
.layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(fornotpc.png) center center no-repeat;
background-size: cover;
}
.inner {
position: relative;
height: 100%;
overflow: hidden;
}
.movie {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: #000;
opacity: 0.3;
}
</style>


<div class="content">CONTENT</div>

<div class="layer">
<div class="inner">
<div id="player" class="movie"></div>
<div class="overlay"></div>
</div>
</div>

<script>
var videoId = '4ZUfl0fPg88';
</script>


<script>
(function userAgent(w) {
  var raw = w.navigator.userAgent;
  var deviceType;
  // sp
  if (/iPhone/.test(raw) || /iPod/.test(raw)) {
    deviceType = 'sp';
  } else if (/Android/.test(raw) && /Mobile/.test(raw)) {
    deviceType = 'sp';
  } else if (/Windows/.test(raw) && /Phone/.test(raw)) {
    deviceType = 'sp';
  } else if (/Firefox/.test(raw) && /Mobile/.test(raw)) {
    deviceType = 'sp';
  } else if (/BlackBerry/.test(raw) || /BB10/.test(raw)) {
    deviceType = 'sp';
  } else if (/Nokia/.test(raw)) {
    deviceType = 'sp';
  // tablet
  } else if (/iPad/.test(raw)) {
    deviceType = 'tablet';
  } else if (/Macintosh/.test(raw) && 'ontouchend' in document) {
    deviceType = 'tablet';
  } else if (/Android/.test(raw) && !/Mobile/.test(raw)) {
    deviceType = 'tablet';
  } else if (/Windows/.test(raw) && /Touch/.test(raw) && !/Tablet PC/.test(raw)) {
    deviceType = 'tablet';
  } else if (/Firefox/.test(raw) && /Tablet/.test(raw)) {
    deviceType = 'tablet';
  } else if (/Playbook/.test(raw)) {
    deviceType = 'tablet';
  } else if (/Kindle/.test(raw) || /Silk/.test(raw)) {
    deviceType = 'tablet';
  // pc
  } else {
    deviceType = 'pc';
  }
  w.deviceType = deviceType;
})(window);
(function(w, doc){
  if(w.deviceType !== 'pc') { return; }
  var setPlayer = 'player'; // set dom id

  var ytag = doc.createElement('script');
  ytag.src = 'https://www.youtube.com/iframe_api';
  var firsttag = doc.getElementsByTagName('script')[0];
  firsttag.parentNode.insertBefore(ytag, firsttag);
  var onLordingYT = setInterval(function() {
    if (typeof YT !== 'undefined' && typeof YT.Player !== 'undefined') {
      clearInterval(onLordingYT);
      new YT.Player(setPlayer, {
          videoId : w.videoId,
          playerVars : {
          controls : 0, // hide controller
          modestbranding : 1, // hide logo
          showinfo : 0, // hide title and user info
          rel: 0, // hide more
          wmode : 'transparent' // for IE z-index
        },
        events : {
          onReady : onPlayerReady,
          onStateChange : onPlayerStateChange
        }
      });
    }
  }, 50);
  var onPlayerReady = function (ev) { // on load
    ev.target.mute();
    ev.target.seekTo(0);
    ev.target.playVideo();
  };
  var onPlayerStateChange = function (ev) { // loop
    if (ev.data === YT.PlayerState.ENDED) {
      ev.target.seekTo(0);
    }
  };
  var frameSetting = function () {
    var windowW = w.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth;
    var windowH = w.innerHeight || doc.documentElement.clientHeight || doc.body.clientHeight;
    var map = doc.getElementById(setPlayer);
    var playerW, playerH;   
    if (windowW / 16 > windowH / 9) { 
      playerW = windowW + 360; // 360 = youtube logo width * 2
      playerH = playerW / 16 * 9;
    } else {
      playerH = windowH + 200; // 200 = youtube logo height * 2
      playerW = playerH / 9 * 16;
    }
    map.style.width = playerW + 'px';
    map.style.height = playerH + 'px';
    map.style.marginLeft = '-' + (playerW / 2) + 'px';
    map.style.marginTop = '-' + (playerH / 2) + 'px';
  };
  w.addEventListener('resize', function() {
    frameSetting();
  }, false);
  w.addEventListener('DOMContentLoaded', function() {
    frameSetting();
  }, false);
})(window, document);
</script> 

code_popup

sample (for pc)

.