时间戳

首页 > 解决方案 > 视频中看到的灵活横幅

javascript - 视频中看到的灵活横幅

问题描述

我试图复制运动和灵活的尺寸，就像在视频中看到的那样。 https://www.youtube.com/watch?v=WPWsGema_6o

基本上它只有 2 个 div 块，一个是图像，另一个是使用 videojs 的视频。此外，一旦我的浏览器下降到一定宽度，我想像视频中看到的那样垂直移动 div。

html代码：

CSS代码

.container {
  max-width: 1400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image {
  flex: 0 1 20%;
  background-color: white;
  width: 500px;
}

@media screen and (max-width: 768px) {
  .image {
    flex: 1 1 100px;
    width: 100%;
  }
  #vid {
    flex: 1 1 100px;
    width: 100%;
  }
}

标签： javascripthtmlcsswebvideo.js

解决方案

在 de media 中，您可以使用 更改 flex 容器的方向flex-direction: column，您可以删除flex-wrap，因为它不是必需的

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
    width: 100%;
  }
  ...

你可以通过这个 Playground 了解更多关于 flex 的基础知识

https://codepen.io/enxaneta/full/adLPwv

推荐阅读