I use VideoJS for DimeCasts.net. It's been a proven HTML5 player that is used by Google, funnyOrDie.com, and many other well known websites.
I realized for some reason that VideoJS was not being responsive on DimeCasts.net lately. What I mean is if you make your browser larger or smaller, the video player should re-sample its size to fit that new browser size and still maintain an aspect ratio that fits into the container in which the video player sits.
I'm almost finished doing a re-code of the views using bootstrap. Originally DimeCasts.net which was started in 2008 was designed via rigid table driven layout. I'm finally getting rid of this after taking over DimeCasts last year.
However even when I have the viewsre-coded and using Bootstrap, I found that VideoJS still wasn't re-sizing on browser size changes.
A quick search brought me to this post.
So all I did to get it intrinsic is to then just add that padding to the containing dive around the video component and the video player is now responsive (changes dimensions to fit the container) when you enlarge or decrease your browser window.
I also changed the width and height of VideoJS to 100%, and surrounded everything with a paragraph tag.
For example:
.makeVideoIntrinsic
{
padding-bottom: 20%;
height: 0px;
}
<p>
<div class="media-body makeVideoIntrinsic">
<video id="<%=ViewData.Model.EpisodeName%>" class="video-js vjs-default-skin"
controls preload="auto" width="100%" height="100%"
poster="../../images/CastThumb_Large.png"
data-setup='{"autoplay": false, "preload": "auto"}'>
<source src=<% = ViewData.Model.FileName %> type='video/mp4' />
</video>
</div>
<p>
I'm happy to say that the new Bootstrapped DimeCasts.net update will be out soon.
No comments:
Post a Comment