时间戳

首页 > 解决方案 > 点击后如何调整视频大小

javascript - 点击后如何调整视频大小

问题描述

有这样一个计划的任务，该网站有一个来自 YouTube 的视频，它包含在一个小窗口中，如何制作它，以便当你点击它时，它会打开屏幕的 3/4，因此，当它停止时，它返回到它的原始值示例与视频块

<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>

.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%;
    }

标签： javascriptphphtmlcss

解决方案

如果您想以特定比例调整任何 HTML 元素的大小，可以使用 transform 属性来执行此操作。

使用一点 JS，它看起来像这样。

HTML

<div id='myDiv'></div>

JS

function resizeDiv() {
  document.getElementById('myDiv').style.transform = 'scale(0.75)';
}

此函数会将 div 缩放到其原始大小的 3/4。剩下的很简单，找出页面如何检测视频何时结束，然后运行一个函数将其调整为原始大小scale(1)

推荐阅读