主页 / 问题 / 707006
Accepted
Vlad Vityuk
Asked:2020-08-17 15:28:16 +0000 UTC2020-08-17 15:28:16 +0000 UTC

响应式视频宽度

  • 772

网站是bootstrap的，网站上有很多不同宽度的视频，在手机上观看时，超出了屏幕边框，我设置width: 100%，在手机上没问题，在PC上所有视频都满了-宽度 div。如何确保每个视频的宽度不超过其原始宽度？

.text_content_res{margin-top:5px;}
video{display:inline-block;margin: auto;}
<div class="row text_content_res ">
  <video class="" id='gifid' onclick='playPause(this.id)' loop>
    <source src='https://test.reseto.com/gifs/3e0d796625761fb1967746649011d2ce.mp4' type='video/mp4'>
  </video>
  <div class="play_button" id='gifidpause' onclick='playPause("gifid")'></div>
</div>

javascript

1 个回答

  1. Best Answer

    .text_content_res{
  margin: 5px;
  position: relative;
  width: 100%;
 }
video{
 display:inline-block;
 margin: 0 auto;
 max-width: 500px;
 width: 100%;
 position: relative;
}
    <div class="row text_content_res ">
  <video class="" id='gifid' onclick='playPause(this.id)' loop>
    <source src='https://test.reseto.com/gifs/3e0d796625761fb1967746649011d2ce.mp4' type='video/mp4'>
  </video>
  <div class="play_button" id='gifidpause' onclick='playPause("gifid")'></div>
</div>

    定位不能忘记，宽度百分比+最大宽度，仅此而已

    • 0

相关问题