Skip to content

Instantly share code, notes, and snippets.

/fiddle.css

Created March 12, 2018 10:50
Show Gist options
  • Save anonymous/bb01c2f75d5a26b6b3037a306f9d9fee to your computer and use it in GitHub Desktop.
Save anonymous/bb01c2f75d5a26b6b3037a306f9d9fee to your computer and use it in GitHub Desktop.
Download ZIP
Youtube full width no black bar (source: https://jsfiddle.net/Aishan/e7s8602k/)
Raw
fiddle.css
div.video-wrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
height: auto;
width: auto;
overflow: hidden;
}
div.video-wrapper iframe {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
}
Raw
fiddle.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Without Black Border</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="video-section">
<div class="col-sm-6">
<div class="video-wrapper">
<div class="video-item">
<iframe width="560" height="265" src="https://www.youtube.com/embed/PCwL3-hkKrg?rel=0&controls=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="video-wrapper">
<div class="video-item">
<iframe width="560" height="265" src="https://www.youtube.com/embed/C0DPdy98e4c?rel=0&controls=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
fiddle.js
$(document).ready(function() {
ratioVideoFrame();
$(window).on('resize', function() {
setTimeout(function() {
ratioVideoFrame();
}, 300);
});
function ratioVideoFrame() {
$('div.video-wrapper .video-item').each(function() {
var video = $(this).find('iframe'),
videoHeight = video.outerHeight(),
videoWidth = video.outerWidth(),
aspectRatio = (videoHeight / videoWidth) * 100,
newWidth = videoHeight * aspectRatio,
halfNewWidth = newWidth / 2;
video.css({
"width": newWidth + "px",
"left": "50%",
"margin-left": "-" + halfNewWidth + "px"
});
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment