Responsively position video with absolute position

Question

The video should be in the middle and it's not.

I'm using absolute positioning and it is not working in placing the video in the middle.

How it works is, you click on the play image and it opens up to reveal a video.

What am I doing wrong?

I can't seem to figure out how to do this.

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");

  }

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    const thewrap = curtain.parentElement.querySelector(".container");
    show(thewrap);
  }

    const cover = document.querySelectorAll('.jacketa');
    cover.forEach(function(el) {
      el.addEventListener('click', coverClickHandler)
    });
    }());

  const videoPlayer = (function makeVideoPlayer() {
  "use strict";

  let player

  const tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100); // percent
  }
  let hasShuffled = false;

  function onPlayerStateChange(event) {
    const player = event.target;
    const shufflePlaylist = true;

    if (!hasShuffled) {
      player.setShuffle(shufflePlaylist);
      player.playVideoAt(0);
      hasShuffled = true;
    }
  }

  function addPlayer(video) {
    const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";
    new YT.Player(video, {

      width: 640,
      height: 360,
      host: "https://www.youtube-nocookie.com",
      playerVars: {
        autoplay: 1,
        controls: 1,
        loop: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        playlist
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  }

  return {
    addPlayer
  };
}());

function onYouTubeIframeAPIReady() {
    const frameContainer = document.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
}

.curtain {
  position: relative;
  width: 100%;
  height: 100%;
}

.curtain.slide {
  height: auto;
  min-height: 100%;
  overflow: hidden;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 10s;

  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("https://picsum.photos/1920/1080");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.panel-right::before {
  left: -100%;
}

.curtain.slide .panel-left {
  transform: translateX(-100%);
}

.curtain.slide .panel-right {
  transform: translateX(100%);
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.jacketa {
  position: absolute;
  top: 40px;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: #130e85;
  border: 3px solid #f91f6e;
  box-sizing: border-box;
  box-shadow: 0 0 20px 2px #f9066bf7;
  display: block !important;
}

.j1 .jacketa {
  left: 30px;
}

.j2 .jacketa {
  right: 30px;
}

.jacketa .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}

.jacketa .coversvg {
  width: 70px;
  height: 75.4px;
  fill: none;
  stroke-width: 4px;
  stroke-miterlimit: 10;
}

.jacketa .coversvg .back {
  stroke: #000;
  opacity: 0.15;
}

.jacketa .coversvg .front {
  stroke: #08f9ff;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;
  animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flicker-1 {

  0%,
  100% {
    opacity: 1;
  }

  41.99% {
    opacity: 1;
  }

  42% {
    opacity: 0;
  }

  43% {
    opacity: 0;
  }

  43.01% {
    opacity: 1;
  }

  47.99% {
    opacity: 1;
  }

  48% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  49.01% {
    opacity: 1;
  }
}

.split-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 240px;
  height: 260px;
  margin: auto;
  border-radius: 50%;
  transition: 10s ease;
}

.j1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
}

.j2 {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
}

.curtain.slide .j1 {
 left: -500%;
}

.curtain.slide .j2 {
  left: 500%;
}

.video-wrapper {
  min-width: 40%;
  max-width: 640px;
  margin: auto;
}

.ratio-keeper {
  position: relative;
  padding-top: 56.25%;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
 
}


.wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid red;
  box-sizing: border-box;
}


.hide {
  display: none;
}

<div class="curtain">
  <div class="outer">
    <div class="tcell">

      <div class="container hide ">
        <div class="video-wrapper">
          <div class="ratio-keeper">

            <div class="wrap ">
              <div class="video video-frame"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel-left"> </div>
      <div class="panel-right"> </div>

      <div class="split-wrap">
        <div class="j1">
          <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
              <title>[ Enjoy The Music ]</title>
              <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
          </div>
        </div>
        <div class="j2">
          <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
              <title>[ Enjoy The Music ]</title>
              <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
          </div>


        </div>
      </div>

    </div>
  </div>
</div>

]1]1

score 0 · Answer 1 · answered Jul 22 '21 at 03:30

you can try this one.

.wrap {
      position:fixed;
      top: 50%;
      left: 50%;
      width:30em;
      height:18em;
      margin-top: -9em; /*set to a negative number 1/2 of your height*/
      margin-left: -15em; /*set to a negative number 1/2 of your width*/
      overflow: hidden;
      border-radius: 25px;
      border: 3px solid red;
      box-sizing: border-box;
    }

You can check more here -> How to position a div in the middle of the screen when the page is bigger than the screen

Responsively position video with absolute position

1 Answers1