css HTML5.如何在div块中制作全宽和全高的视频？

snz8szmq 于 2023-04-08 发布在 HTML5

关注(0)|答案(1)|浏览(104)

现在我有照片上的情况。
Stories

我需要的是，无论视频是垂直或水平，它完全涵盖了从内部圆的DIV块。
也就是说，如果是水平视频，则顶部没有白色条纹，如果是垂直视频，则左侧和右侧没有白色条纹。
而且当你点击视频时，播放器会显示没有缩放的剪辑。

超文本标记语言

<div class="Stories_line">
  <li>
      <video controls="" width="130px" height="130px" autoplay="" class="stories">
  <source src="video/Stories1.mp4" type="video/mp4">
  <source src="video/Stories1.webm" type="video/webm">
  <source src="video/Stories1.ogv" type="video/ogg">
  <object data="video/Stories1.swf" type="application/x-shockwave-flash">
    <param name="movie" value="video.swf">
  </object>
</video>
 </li>
<!-------------------->
   </div>

CSS

.Stories_line {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
}

.stories {
    background: linear-gradient(#fff 0 0) padding-box, linear-gradient(to right, #9c20aa, #fb3570) border-box;
    color: #313149;
    border: 5px solid transparent;
    border-radius: 100px;
    display: inline-block;
    margin: 5px 0;
}

ul.images li {
    display: inline;
    width: 150px;
    height: 250px;
}

css

来源：https://stackoverflow.com/questions/75934733/html5-how-to-make-a-full-width-and-height-video-inside-a-div-block

1条答案

按热度按时间

dgenwo3n1#

我自己找到了答案。

<div class="Stories_line">
<!---------------------->
  <li>
 <div class="Stories_circle">  
      <video controls="" autoplay="" class="User-stories-video" muted="">
  <source src="video/Stories1.mp4" type="video/mp4">
  <source src="video/Stories1.webm" type="video/webm">
  <source src="video/Stories1.ogv" type="video/ogg">
  <object data="video/Stories1.swf" type="application/x-shockwave-flash">
    <param name="movie" value="video.swf">
  </object>
</video>
</div>   
 </li>

<!------------------->

<!----->

<!-------------------->
   </div>

CSS

.Stories_line {
        display: flex;
        gap: 40px;
        margin-bottom: 20px;
    }
     
.Stories_circle {
    background: linear-gradient(#fff 0 0) padding-box,linear-gradient(to right, #9c20aa, #fb3570) border-box;
    color: #313149;
    overflow: hidden;
    border: 5px solid transparent;
    border-radius: 100px;
    display: inline-block;
    margin: 5px 0;
}

.User-stories-video {
    overflow: hidden;
    height: 120px;
    width: 120px;
    -moz-transform: scale(1.9);
    -webkit-transform: scale(1.9);
    -o-transform: scale(1.9);
    -ms-transform: scale(1.9);
    transform: scale(1.9);
}

赞(0）回复(0）举报 2023-04-08

我来回答

css HTML5.如何在div块中制作全宽和全高的视频？

1条答案

相关问题

热门标签

最新问答