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
Your codepen effort seems to to work OK here in Opera, Firefox & Chrome. Which browser are you using?
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>
Thanks for your help.
The code is already been fixed.