Question

我正在学习网络开发并试图建立一个网站。我正在尝试使用YouTube视频制作旋转木马。我所拥有的是工作，但它拒绝调整我的需求。

这就是我得到的。宽视频但视频短。

但这就是我想要的，最接近全屏但是我想保留旋转木马的左/右导航并将它们显示在视频内容的顶部。

这是我的代码：请看看：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > iframe,
  .carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
  }
  </style>
</head>
<body style="height:100%;">

<div style="height:100%;">
  <div id="myCarousel" class="carousel slide" data-ride="carousel" style="height:100%;">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox" style="height:100%;">

      <div class="item active" style="height:100%;">
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
      </div>

      <div class="item" style="height:100%;">
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
      </div>

      <div class="item" style="height:100%;">
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
      </div>

      <div class="item" style="height:100%;">
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
      </div>

    </div>
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

Answer 1

height:100%与父元素相关。在这种情况下，html是父元素，并且没有定义的高度。如果您将height:100%;添加到html代码的CSS中，则应该有效：

＆＃13;

<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > iframe,
  .carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
  }
  </style>
</head>
<body style="height:100%;">

<div style="height:100%;">
  <div id="myCarousel" class="carousel slide" data-ride="carousel" style="height:100%;">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox" style="height:100%;">

      <div class="item active" style="height:100%;">
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
      </div>

      <div class="item" style="height:100%;">
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
      </div>

      <div class="item" style="height:100%;">
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
      </div>

      <div class="item" style="height:100%;">
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
      </div>

    </div>
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

＆＃13;

我还建议使用style标记或外部样式表而不是内联CSS，因为它更易于管理。

为什么我的YouTube嵌入式拒绝在视频轮播中调整大小？

1 个答案: