如何在移动设备上将视频 div 调整为 100% 宽度

问题描述 投票：0回答：1

当我使浏览器窗口变薄以复制移动设备大小时 - 图像会精细调整大小并填充 100% 宽度...

但我无法获取视频

  1. 填充100%宽度
  2. 与顶部对齐 - 由于某种原因，其上方和下方有很多绿地。

我尝试过使用媒体查询，并认为仅使用 % / auto 值可能会更简单 - 但似乎没有任何效果。有什么想法吗？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple Responsive Slideshows</title>
  <!-- Bootstrap CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      background-color: whitesmoke;
      margin: 0; /* Reset margin to 0 */
      padding: 20px; /* Reset padding to 0 */
    }

    .container {
      background-color: red;
      margin-bottom: 50px;
      padding: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column; /* Change flex direction to column */
      position: relative; /* Add position relative */
      margin-top: 0px; /* Add margin-top for spacing */
      overflow: none;
    }

    .slideshow-container {
      position: relative;
      width: 100%;
      margin: auto;
      max-height: 90vh;
      overflow: none;
      background-color: green; /* Set default background color to transparent */
      display: flex; /* Use flexbox layout */
      justify-content: center; /* Center items horizontally */
      align-items: center; /* Center items vertically */
    }

    .stage-bg {
      background-color: white; /* Set background color to red for carousel items with this class */
    }

    .carousel-item {
      text-align: center; /* Center images horizontally */
    }

    .slideshow-container img,
    .slideshow-container iframe {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    /* Show arrows only on hover */
    .slideshow-container:hover .prev,
    .slideshow-container:hover .next {
      display: block;
    }

    .prev,
    .next {
      display: none;
      cursor: default; /* Change cursor to default */
      z-index: 1000;
      color: silver;
      font-weight: bold;
      font-size: 30px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: auto;
      padding: 16px;
      border-radius: 0 3px 3px 0;
      user-select: none;
      text-decoration: none; /* Remove underline */
    }

    .prev:hover,
    .next:hover {
      text-decoration: none; /* Remove underline */
      color: silver; /* Change color on hover */
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    .prev.disabled,
    .next.disabled {
      pointer-events: none;
      opacity: 0.5;
    }


    /* Custom CSS for text boxes */
    .textbox {
      background-color: white;
      max-width: 600px;
      padding: 10px;
      margin-top: 20px; /* Add margin-top for spacing */
      margin-left: auto; /* Align to the right */
      margin-bottom: 20px; /* Add margin-bottom for spacing */
      text-align: left; /* Align text to the left */
    }

    .textbox p {
      margin: 0;
  
      }
   
  </style>
</head>
<body>

<div class="container" style="max-width: 1000px">
  <div id="myCarousel1" class="slideshow-container carousel" data-ride="carousel" data-interval="false">
    <!-- Image Slides -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://source.unsplash.com/random/900x600/?kitten">   
      </div>
      <div id="artists" class="carousel-item" style="padding: 20px">
<iframe src="https://player.vimeo.com/video/335205129?h=1e30c728b8&title=0&byline=0&portrait=0" width="640" height="640" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>      
        </div>
        
        
        <div id="nochill" class="carousel-item" style="padding: 20px">
<iframe src="https://player.vimeo.com/video/143374377?h=760ef66606&title=0&byline=0&portrait=0" width="800" height="450" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>  
        </div>

        
    </div>

    <!-- Navigation Arrows -->
    <a class="prev" href="#myCarousel1" data-slide="prev">&#10094;</a>
    <a class="next" href="#myCarousel1" data-slide="next">&#10095;</a>
  </div>
  <!-- Textbox -->
  <div class="textbox">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nulla posuere, justo ut lacinia fermentum, nulla purus lacinia enim.</p>
  </div>
</div>

    
    
<!-- Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


</body>
</html>

css responsive-design
1个回答
1
投票

这与我之前回答过的另一个问题有关，其中视频不会占据轮播的整个宽度。所以这有类似的解决方案。

您可以通过在 

iframe
周围使用包装 div 并将 padding-bottom 设置为代表您想要的纵横比的百分比来解决此问题。该百分比的计算方式为高度除以宽度乘以 100。对于 
16:9
纵横比，这将是 
(9 / 16) * 100 = 56.25%
。对于 
4:5
纵横比，这将是 
(5 / 4) * 100 = 125%
，就像上一个问题一样。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple Responsive Slideshows</title>
  <!-- Bootstrap CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  
  <style>
    body {
      background-color: whitesmoke;
      margin: 0; /* Reset margin to 0 */
      padding: 20px; /* Reset padding to 0 */
    }

    .container {
      background-color: green;
      margin-bottom: 50px;
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center; 
    }
      
    .slideshow-container {
      position: relative;
      width: 100%;
      margin: auto;
      max-height: 90vh;
      overflow: none;
      background-color: green; /* Set default background color to transparent */
      display: flex; /* Use flexbox layout */
      justify-content: center; /* Center items horizontally */
      align-items: center; /* Center items vertically */
    }

    .stage-bg {
      background-color: white; /* Set background color to red for carousel items with this class */
    }

    .carousel-item {
      text-align: center; /* Center images horizontally */
    } 
      
    /* Custom CSS for text boxes */
    .textbox {
      background-color: white;
      max-width: 600px;
      padding: 10px;
      margin-top: 20px; /* Add margin-top for spacing */
      margin-left: auto; /* Align to the right */
      margin-bottom: 20px; /* Add margin-bottom for spacing */
      text-align: left; /* Align text to the left */
    }

    .textbox p {
      margin: 0;
    }

    /* Custom aspect ratio for 4x5 video */
    .embed-responsive-4by5::before {
      padding-bottom: 125%;
    }

    .vidbox {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-bottom: 56.25%; /* for 16:9 aspect ratio */
    }

    .vidbox iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .embed-responsive-4by5 .vidbox {
      padding-bottom: 125%; /* for 4:5 aspect ratio */
    }
  </style>
</head>

<body>

<div class="container" style="max-width: 1000px;">
  <div id="myCarousel1" class="slideshow-container carousel" data-ride="carousel" data-interval="false">
    <!-- Image Slides -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://source.unsplash.com/random/900x600/?kitten" alt="...">
      </div>
      
      <!-- Video Slide 1-->
      <div class="carousel-item">
        <div id="nochill" class="vidbox embed-responsive embed-responsive-16by9">
          <iframe src="https://player.vimeo.com/video/143374377?h=760ef66606&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
        </div>  
      </div>

     <!-- Video Slide 2 -->
      <div class="carousel-item">
        <div class="phonewrapper embed-responsive embed-responsive-4by5">
          <div id="phone" class="vidbox">
            <iframe src="https://player.vimeo.com/video/912417077?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
          </div>
        </div>
      </div>
      
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/1000x800/?sea" alt="...">
      </div>
    </div>
  
    <!-- Navigation Arrows -->
    <a class="prev" href="#myCarousel1" data-slide="prev">❮</a>
    <a class="next" href="#myCarousel1" data-slide="next">❯</a>
  </div>
  
  <!-- Textbox -->
  <div class="textbox">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nulla posuere, justo ut lacinia fermentum, nulla purus lacinia enim.</p>
  </div>
</div>

<!-- Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.