HTML
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Responsive Video">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="//vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
<style>
.video-js{
position: absolute;
top:0px;
left: 0px;
height: 100%;
width: 100%;
}
</style>
<title>JS Bin</title>
</head>
<body>
<div class="section block">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Bootstrap responsive video using both YouTube and <a href="http://videojs.com/" target="_blank">video.js</a>.</h1> <p>I have painsteakingly tweaked the video wrapper percentages based on the original styles I derived from <a href="https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php" target="_blank">css tricks</a>. This allows me remove the additional css top padding used to prevent the potential apperance of black bars on the side, top and bottom of the videos.</p><p>I also included two additional classes for standard old school 3:4 resolution, and cinema scope... whatever ratio that is.</p><p>So far it seems to work fine in current versions of IE, Safari, and FF.</p><p>I would also like to note that video is like snow flakes no two are the same. In the examples below you might see a slight black line on the sides. Sometimes videos are encoded diffrently. This is especially true with older footage derived from film or video tape. Based on the original source material, and the means to transfer it the aspect ratio might be off. You can compensate for this by adjusting the padding precentages.</p><p><a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)" target="_blank">Go here</a> for more information on film and video aspect ratios</p><p>Let me know if I'm doing something wrong. <a href="mailto:scottsaunders@mac.com">scottsaunders@mac.com</a></p>
</div>
</div>
</div>
</div>
<div class="section block">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>video js</h1>
</div>
</div>
</div>
</div>
<div class="section block">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="videoWrapper standard">
<video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="//archive.org/download/RefreshingLo/RefreshingLo.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>
</div>
<div class="col-md-6">
<h1 class="text-primary">Standard 4:3</h1>
<h3>Here is a sub title</h3>
<p></p>
</div>
</div>
</div>
</div>
<div class="section block">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="text-primary">Panavision 2.35:1 or 2.39:1 </h1>
<h3>Here is a sub title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lectus dui, accumsan ac felis vel, laoreet consectetur velit. Duis gravida in dui nec mattis. Maecenas ac metus dapibus, ornare enim id, consequat quam. Aenean quis consequat ex. Pellentesque vehicula dolor id lacinia gravida. Donec consequat lectus vitae faucibus imperdiet. Aenean id libero congue, euismod enim sit amet, aliquet ligula.</p>
</div>
<div class="col-md-6">
<div class="videoWrapper panavision">
<video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="//archive.org/download/mclintok_widescreen/McLintock.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>
</div>
</div>
</div>
</div>
<div class="section block">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>YouTube</h1>
</div>
</div>
</div>
</div>
<div class="section block">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="videoWrapper widescreen">
<iframe width="560" height="315" src="https://www.youtube.com/embed/dushZybUYnM" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-6">
<h1 class="text-primary">Widescreen 16:9</h1>
<h3>Here is a sub title</h3>
<p></p>
</div>
</div>
</div>
</div>
<div class="section block">
<div class="container">
<div class="row">
<div class="col-md-5">
<h1 class="text-primary">Standard 4:3 </h1>
<h3>Here is a sub title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lectus dui, accumsan ac felis vel, laoreet consectetur velit. Duis gravida in dui nec mattis. Maecenas ac metus dapibus, ornare enim id, consequat quam. Aenean quis consequat ex. Pellentesque vehicula dolor id lacinia gravida. Donec consequat lectus vitae faucibus imperdiet. Aenean id libero congue, euismod enim sit amet, aliquet ligula.</p>
</div>
<div class="col-md-7">
<div class="videoWrapper standard">
<iframe width="420" height="315" src="https://www.youtube.com/embed/gjmANi13WA0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="section block">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="videoWrapper standard">
<iframe width="420" height="315" src="https://www.youtube.com/embed/7MsCtmgs-hs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-5">
<h1 class="text-primary">Standard 4:3</h1>
<h3>Here is a sub title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lectus dui, accumsan ac felis vel, laoreet consectetur velit. Duis gravida in dui nec mattis. Maecenas ac metus dapibus, ornare enim id, consequat quam. Aenean quis consequat ex. Pellentesque vehicula dolor id lacinia gravida. Donec consequat lectus vitae faucibus imperdiet. Aenean id libero congue, euismod enim sit amet, aliquet ligula.</p>
</div>
</div>
</div>
</div>
<div class="section block">
<div class="container">
<div class="row">
<div class="col-md-5">
<h1 class="text-primary">Standard 4:3 Adjusted percentage with border</h1>
<h3>Here is a sub title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lectus dui, accumsan ac felis vel, laoreet consectetur velit. Duis gravida in dui nec mattis. Maecenas ac metus dapibus, ornare enim id, consequat quam. Aenean quis consequat ex. Pellentesque vehicula dolor id lacinia gravida. Donec consequat lectus vitae faucibus imperdiet. Aenean id libero congue, euismod enim sit amet, aliquet ligula.</p>
</div>
<div class="col-md-7">
<div class="videoWrapper standard border">
<iframe width="420" height="315" src="https://www.youtube.com/embed/gjmANi13WA0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<script src="http://vjs.zencdn.net/5.7.1/video.js"></script>
<script>
function CenterPlayBT() {
var playBT = $(".vjs-big-play-button");
playBT.css({
left:( (playBT.parent().outerWidth()-playBT.outerWidth())/2 )+"px",
top:( (playBT.parent().outerHeight()-playBT.outerHeight())/2 )+"px"
});
}
</script>
</body>
</html>
CSS
body{font-size:18px !important; font-family: 'Lato', sans-serif !important;
background-color:#fff;}
.videoWrapper{
-webkit-box-shadow: 0 10px 20px 0 #666666;
box-shadow: 0 10px 20px 0 #666666;
background-color: #000;
}
.section.block{
margin: 40px 0 40px 0;
}
.videoWrapper.standard {
position: relative;
padding-bottom: 75%; /* 4:3 */
}
.videoWrapper.standard.border {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-style:solid;
border-width: 5px;
border-color:# 333;
padding-bottom: 74.25%; /* 4:3 */
}
.videoWrapper.widescreen {
position: relative;
padding-bottom: 56.4%; /* 16:9 */
}
.videoWrapper.panavision {
position: relative;
padding-bottom: 43.58%; /*panavision*/
}
.videoWrapper video, .videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
