Daniel White
Reputation: 3377
IE8 Video.js Aspect Ratio / Sizing Problems
I am frustrated to the bitter end on this project I'm working on lol. I am using Video.js to create the site which will be a site where users upload videos for contests.
I am using twitter bootstrap and I've created a responsive design from a PSD and it looks awesome in all real browsers (ff, safari, chrome, etc.). It even looks pretty decent in IE7, IE9 and IE10. BUT, for some reason it just completely breaks in IE8.
I am using a jquery script to force 16x9 aspect ratio, and this is where the problem lies. IE8 just totally ignores it and the html5 video element doesn't have a width or height on it, so it completely freaks out the browser.
Any ideas? Ultimately I'm trying to just have responsive width and 16x9 height ratio. The script i'm using works beautifully for it, but I HAVE to be able to support IE8. Don't care about 7.
Here's a live preview of the site, it's using the codeigniter framework, not that that matters...
Here's my page code...
<!DOCTYPE html>
<html>
<head>
<title>Cover Song Contests | Rendition Battle</title>
<meta name="description" content="RenditionBattle.com offers cash prizes for cover song contests.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://localhost:8888/renditionbattle/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://localhost:8888/renditionbattle/css/main.css" rel="stylesheet" media="screen">
<link href="http://localhost:8888/renditionbattle/css/responsive.css" rel="stylesheet" media="screen">
<!-- Video.js in head for older IE -->
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<!-- Sticky Footer Wrapper -->
<div class="heightWrapper">
<!-- Login Header -->
<div class="loginHeader">
<div class="container">
<div class="pull-right register">
<a href="#" class="btn btn-small btn-inverse">Signup</a> <a href="#">Sign Up</a> | <a href="#">Register</a>
</div>
</div>
</div>
<!-- End Login Header -->
<!-- Logo and Navigation -->
<div class="container header">
<div class="logo pull-left"><a href="#"><img src="http://localhost:8888/renditionbattle/img/logo.png" alt="Rendition Battle" /></a></div>
<ul class="mainnav pull-right">
<li><a href="#">Home</a></li>
<li><a href="#">Latest Battle</a></li>
<li><a href="#">Vote Now</a></li>
<li><a href="#">Request a Contest</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div class="btn-group mobilenav">
<a class="btn dropdown-toggle btn-inverse" data-toggle="dropdown" href="#">Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Latest Battle</a></li>
<li><a href="#">Vote Now</a></li>
<li><a href="#">Request a Contest</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div class="stripes"></div>
<!-- End Logo and Navigation -->
<!-- Battle Leader Section -->
<div class="background">
<div class="container">
<p class="tagline">sign up. upload your rendition of the contest's song. win money.</p>
<div class="battleLeader">
<div id="battleVideo">
<div class="battleTag"></div>
<video id="battle" class="video-js vjs-default-skin" width="500" height="300" controls preload="auto" poster="my_video_poster.png" data-setup='{"techOrder": ["html5", "flash"]}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
</video>
</div>
</div>
</div>
</div>
<!-- End Battle Leader Section -->
<!-- Upload Now -->
<div class="uploadNow">
<div class="container">
<div class="row">
<div class="span9 acEntries">
<h4>CURRENT CONTEST ACCEPTING ENTRIES UNTIL MARCH 30, 2013</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
<div class="span3"><a href="#" class="btn btn-block btn-large btn-info">Upload Now <i class="icon-share-alt icon-white"></i></a></div>
</div>
</div>
</div>
<!-- End Upload Now -->
<!-- Featured Member and Comments-->
<div class="featuredMember">
<div class="container">
<div class="row">
<!-- Latest Comments -->
<div class="span6 latestComments">
<div class="comment">
<div class="lcContent">
<div class="lcAvatar"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder" /></div>
<div class="lcDate">Jan 7th, 2013</div>
<div class="lcComment">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<div class="lcMore">
<a href="#" class="btn btn-small">View Profile</a>
</div>
</div>
</div>
<div class="comment">
<div class="lcContent">
<div class="lcAvatar"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder" /></div>
<div class="lcDate">Jan 7th, 2013</div>
<div class="lcComment">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<div class="lcMore">
<a href="#" class="btn btn-small">View Profile</a>
</div>
</div>
</div>
<div class="comment">
<div class="lcContent">
<div class="lcAvatar"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder" /></div>
<div class="lcDate">Jan 7th, 2013</div>
<div class="lcComment">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<div class="lcMore">
<a href="#" class="btn btn-small">View Profile</a>
</div>
</div>
</div>
</div>
<!-- Latest Member -->
<div class="span6 latestMember">
<h3>Current Contest Leader</h3>
<p class="lmp">ShockForce75's rendition of Carly Rae Jaspen's: Call Me Maybe</p>
<div class="latestvid">
<video id="lvid" class="video-js vjs-default-skin" controls preload="auto" poster="my_video_poster.png" data-setup='{"techOrder": ["html5", "flash"]}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
</video>
</div>
<div class="lvidComment">
<div class="lvidCommentTail"><img src="http://localhost:8888/renditionbattle/img/lc.png" alt="latest comment" /></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Featured Member -->
<!-- Previous Members -->
<div class="pwHeader">
<div class="container">
<h4>Previous Winners</h4>
</div>
</div>
<div class="pw">
<div class="container">
<div class="row">
<div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
<div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
<div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
<div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
<div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
<div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
</div>
</div>
</div>
<!-- End Previous Members --> <div class="push"></div>
</div>
<!-- End Sticky Footer Wrapper -->
<!-- Footer -->
<div class="footer">
<div class="container">
<div class="pull-left">
<p>Copright © 2013 RenditionBattle.com. All Rights Reserved.<br />
<a href="http://422studios.com" target="_blank">Dallas Web Development</a> by 422 Studios, LLC</p>
</div>
<div class="pull-right">
<a href="#"><img src="http://localhost:8888/renditionbattle/img/icon-twitter.png" alt="twitter" /></a>
<a href="#"><img src="http://localhost:8888/renditionbattle/img/icon-fb.png" alt="facebook" /></a>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- End Footer -->
<!-- JS -->
<input type="hidden" id="siteUrl" value="http://localhost:8888/" />
<input type="hidden" id="baseUrl" value="http://localhost:8888/" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://localhost:8888/renditionbattle/js/bootstrap.min.js"></script>
<script src="http://localhost:8888/renditionbattle/js/respond.min.js"></script>
<script src="http://localhost:8888/renditionbattle/js/main.js"></script>
<script src="http://localhost:8888/renditionbattle/js/aspectratio.js"></script>
</body>
</html>
Here is my JS for the aspect ratio...
//Battle video aspect ratio
// Once the video is ready
$(document).ready(function() {
_V_("battle").ready(function(){
var myPlayer = this; // Store the video object
var aspectRatio = 9/16; // Make up an aspect ratio
function resizeVideoJS(){
// Get the parent element's actual width
var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
// Set width to fill parent element, Set height
myPlayer.width(width).height( width * aspectRatio );
}
resizeVideoJS(); // Initialize the function
window.onresize = resizeVideoJS; // Call the function on resize
});
//Latest video aspect ratio
// Once the video is ready
_V_("lvid").ready(function(){
var myPlayer = this; // Store the video object
var aspectRatio = 9/16; // Make up an aspect ratio
function resizeVideoJS(){
// Get the parent element's actual width
var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
// Set width to fill parent element, Set height
myPlayer.width(width).height( width * aspectRatio );
}
resizeVideoJS(); // Initialize the function
window.onresize = resizeVideoJS; // Call the function on resize
});
});
Any ideas on how I can modify my code to work? If someone knows of something that I could use to accomplish my utlimate goal I am open to switching solutions entirely if need be.
Also, I DID try everything I can find and think of to redirect to http://www.422clients.com/page/upgrade if they were IE8 but it just loads forever and ultimately gives me a weird connection error page on ie8.
Upvotes: 2
Views: 1846
Answers (2)
misterben
Reputation: 7821
As you're using jQuery anyway, use its resize() method as it seems to work more reliably on IE8.
Also, per the API Docs size() is more efficient than height() and width().
function resizeVideoJS(){
// Get the parent element's actual width
var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
// Set width to fill parent element, Set height
myPlayer.size(width,Math.floor(width*aspectRatio));
}
resizeVideoJS();
$(window).resize(resizeVideoJS);
Upvotes: 0
Ashley
Reputation: 5947
ie8 doesn't support the video tag, nor does ie7 - not sure how you are getting it to work there.
Proof: http://caniuse.com/#feat=video
You will need to use a flash substitute, or abandon the video for ie8, or abandon ie8 support. A good library you can use is https://github.com/zencoder/video-js
Upvotes: 2
Related Questions
- Video.js - Making it responsive in different sizes
- How to fit a mp4 video to a certain height and width in IE?
- HTML Video tag just shows half the video in IE
- Maintaining a videos aspect ratio in a responsive layout
- HTML5 Video: Retain aspect ratio when resizing
- video.js - controls not displaying in IE8
- Resize <Video> on Fallback to IE8 embedded in <Object>, Video gets Cropped
- Why does mediaelements.js not scale youtube videos in Internet Explorer 8?
- Force video size in HTML
- Internet Explorer 9 beta HTML5 video tag not supporting relative width/height?