Looking for a jQuery/JS solution to make a Youtube video responsive

**kayut** · 10-11-2018, 02:11 PM

Hi,

Looking for a solution to make a Youtube video iframe responsive I found this page:

Fluid Width Video

Now I'm trying for hours to apply it on my code example here:

Trying to make it responsive

but it's not working and I don't understand why.

Could you please help me with this? I'm not looking for a CSS solution. I'm looking for a jQuery/JS solution.

Thanks

**styxlawyer** · 10-12-2018, 10:41 AM

Your codepen effort seems to to work OK here in Opera, Firefox & Chrome. Which browser are you using?

**molendijk** · 10-12-2018, 10:53 AM

This code works for me except that setPaddingTop() doesn't seem to do anything:

Code:

<!doctype html>
<html lang="nl" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Fluid YT</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<style>
/* ==========================================
               Global Styling
========================================== */
*,
*:before,
*:after {
  box-sizing: border-box;
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================================
                 Styling
========================================== */
body {
  background-color: rgb(218, 237, 245);
  margin: 0;
}
header {
  position: fixed;
  background-color: #fff;
  width: 100%;
  height: 75px;
  z-index: 2;
}
.logo {
  img {
    width: 200px;
    height: 45px;
    margin: 15px auto;
  }
}
main {
  background-color: #fff;
  width: 50%;
  margin: 0 auto;
  padding-top: 75px;
  z-index: 1;
}

#main-video {
  outline: 3px solid red;
}

.second-section {
  article {
    margin-top: 20px;
    cursor: pointer;

    img {
      width: 45%;
      float: left;
    }

    .details {
      float: right;
      width: 54%;
      padding: 0 15px;
      text-align: left;
    }
  }
}

</style>




</head>

<body>

<iframe width="560" height="349" class="resp-iframe" src="http://www.youtube.com/embed/qxWrnhZEuRU?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>

<div class="second-section" style="background: red">second section</div>

<script>
// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

/* ==========================================
    Set the padding-top of the second section 
    equal to the height of the iframe
========================================== */

const setPaddingTop = () => {
  // clientHeight includes the height and vertical padding. (see also offsetHeight and scrollHeight)
  let iframeHeight = document.querySelector(".resp-iframe").clientHeight;

  let secondSection = document.querySelector(".second-section");

  secondSection.style.paddingTop = iframeHeight;

  // Apply the above also if window gets resized
  window.addEventListener(
    "resize",
    function() {
      let iframeHeight = document.querySelector(".resp-iframe").clientHeight;
      secondSection.style.paddingTop = iframeHeight;
    },
    true
  );
};

setPaddingTop();

</script>

</body>

</html>