CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapcarousel
Dr Confuse
Dr Confuse

Reputation: 625

Why are my YouTube embeds refusing to resize inside a video carousel?

I'm learning web dev and trying to build a site. I'm trying to make a carousel but with YouTube videos. What I have is working but it refuses to resize to my needs.

This is what I'm getting. A wide but short video size. This is what I'm getting. A wide but short video size.

But this is what I want, nearest to full screen but I would like to retain the left/right navigation from the carousel and have them appear on top of the video content. enter image description here

Here's my code: Pls, have a look:

<!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>

Upvotes: 0

Views: 139

Answers (1)

APAD1
APAD1

Reputation: 13666

height:100% is relative to the parent element. In this case html is the parent element and doesn't have a defined height. If you add height:100%; to the CSS of your html tag it should work:

<!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>

I would also suggest using a style tag or an external stylesheet rather than inline CSS because it's easier to manage.

Upvotes: 2

Related Questions