18910140161

HTML-使用绝对位置对视频进行响应定位-堆栈溢出

顺晟科技

2022-10-19 11:31:26

98

视频应该在中间,而不是。

https://jsfiddle.net/g54q2rb3/

我使用的是绝对定位,在将视频放在中间时不起作用。

它的工作原理是,单击播放图像,它将打开显示视频。

我做错了什么?

我似乎不知道如何做到这一点。

]1]1


顺晟科技:

您可以试试这个。

(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);
}

您可以在这里查看更多信息-> 当页面大于屏幕时如何将div定位在屏幕中间

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航