3300.me

mp4_bg_window

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

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


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

<div class="layer">
<video src="sample02.mp4" autoplay loop poster="thumb02.png" id="mp4"></video>
<div class="overlay"></div>
</div>


<script>
((w, d) => {
  const frameSetting = () => {
    const windowW = w.innerWidth || (d.documentElement.clientWidth || d.body.clientWidth);
    const windowH = w.innerHeight || (d.documentElement.clientHeight || d.body.clientHeight);
    const mp4 = d.getElementById('mp4');
    let playerW, playerH;   
    if (windowW / 16 > windowH / 9) { 
      playerW = windowW + 16; // cover the margin which shows in left and right in the long state in the side
      playerH = playerW / 16 * 9;
    } else {
      playerH = windowH + 9; // same as above
      playerW = playerH / 9 * 16;
    }
    mp4.style.width = playerW + 'px';
    mp4.style.height = playerH + 'px';
    mp4.style.marginLeft = '-' + (playerW / 2) + 'px';
    mp4.style.marginTop = '-' + (playerH / 2) + 'px';
  };
  w.addEventListener('resize', () => {
    frameSetting();
  }, false);
  w.addEventListener('DOMContentLoaded', () => {
    frameSetting();
  }, false);
})(window, document);
</script>

code_popup

sample (H.264 non-audio mp4) (for pc)

.