时间戳

首页 > 解决方案 > 如何调整页面上的视频大小

javascript - 如何调整页面上的视频大小

问题描述

单击视频时，我需要调整其大小。视频应该变大（大约是页面大小的 3/4）。如何实现这一点，使其看起来不笨拙。html div

``<div class="flower_petal flower_petal_small flower_petal_video">
                                <div class="flower_petal_video_video">
                                    <iframe width="100%" height="100%" src="https://www.youtube.com/xxx/xxx" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                </div>
                            </div> ``
    

css
 ``.flower_petal_video {
  margin: -60px 0;
  padding: 0;
  height: 268px;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-image: url(../img/laptop.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #0000;
}
 
.flower_petal_video_video {
  /*background-color: #f00;*/
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 15.4%;  ``

标签： javascripthtmlcss

解决方案

要在 youtube iframe 上获得“点击”事件，我会使用 youtube iframe api ( https://developers.google.com/youtube/iframe_api_reference )。

然后我会在视频播放时向您的 iframe 容器添加一个“播放”类，并在暂停时将其删除。

然后您可以使用“播放”类来更改视频的大小。

<div class="flower_petal flower_petal_small flower_petal_video">
  <div class="flower_petal_video_video">
    <div id="youtubePlayer">
      <div id="player"></div>
    </div>
  </div>
</div>

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

function onYouTubeIframeAPIReady() {
  var youtubePlayer = document.getElementById("youtubePlayer");
  var player = new YT.Player("player", {
    videoId: "wuJIqmha2Hk",
    events: {
      onStateChange: function (event) {
        if (event.data === YT.PlayerState.PLAYING) {
          youtubePlayer.classList.add("playing");
        }

        if (event.data === YT.PlayerState.PAUSED) {
          youtubePlayer.classList.remove("playing");
        }
      }
    }
  });
}

.flower_petal_video_video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

#youtubePlayer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transition: 0.2s ease;
}

#youtubePlayer.playing {
  width: 75%;
  height: 75%;
}

#player {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

看看这个代码笔

推荐阅读