0

I have a Silverlight video player. When the width of the page is less than 960px, the player goes to 100% width. I'm trying to get the height to adjust along with the width (width / 1.77777778 + 40px for the controls).

caniuse.com states that calc() is supported in IE9+, Firefox 14+, Chrome 21+, and Safari 6+. It also states that vw is supported in IE9+, Chrome 21+, and Safari 6+ (no Firefox).

I am using this bit of HTML:

<!-- I put silverlight first because firefox and opera won't embed an mp4/mp3
    firefox won't fall back to the silverlight install link if only mp4/mp3 is available (webm or ogg must be available for the fallback to work) -->
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2">
    <!-- load the player -->
    <param name="source" value="http://iissmooth.webcastcenter.com/SmoothStreamingPlayer.xap"/>
    <!-- note the DeliveryMethod -->
    <param name="InitParams" value="DeliveryMethod=Progressive Download, mediaurl=http://www.flcbranson.org/media/GreaterFaithConference2013-Ad.mp4" />
        <!-- silverlight install link -->
        <p><a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0"><img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"></a></p>
        <p><a href="media/GreaterFaithConference2013-Ad.mp4">Download Video (MP4)</a></p>
</object>

And this bit of CSS:

@media screen and (max-width:959px) {
    .events object {
        height:-moz-calc(100vw / 1.777777778 + 40px);
        height:-webkit-calc(100vw / 1.777777778 + 40px);
        height:-ms-calc(100vw / 1.777777778 + 40px);
        height:-o-calc(100vw / 1.777777778 + 40px);
        height:calc(100vw / 1.777777778 + 40px);
    }
}

In theory, it should work in IE9+ and Chrome 21+ (both support calc() and vw. Unfortunately, only IE9+ works (I was quite impressed with the level of calc() support that IE has).

I have yet to see a tutorial or example of combining calc(), vw, and division for fluid heights, so maybe the combination is the issue.

Is there something wrong in my code, or should this be working (maybe I found a bug)?

To dissuade suggestions, I have tried JQuery's height() already (it isn't fluid since you have to refresh for each change to go into effect). I guess I could include a function to watch the width of the page all the time. My effort is to do it with CSS, though.

I did see, in another question, reference to FitVid.JS. There is reference to Vimeo, YouTube, etc..., but I question whether it would work with a local Silverlight player (I require Silverlight for many, many, WMVs).

Community
  • 1
  • 1
doubleJ
  • 1,190
  • 1
  • 16
  • 29

1 Answers1

0

Height calculation can be done entirely in css using relative padding. This technique is used by Foundation Framework for their Flex Video. For detailed explanation please check http://alistapart.com/article/creating-intrinsic-ratios-for-video

Dara
  • 68
  • 6
  • Hehehe... I am doing that in another area, but not with the video player in question (`#content { padding-top:56.24%; }`). That's for a 100% width banner graphic that gets taller or shorter with the width of the page. – doubleJ Feb 11 '13 at 23:47