986996 - blip.tv - videos too large for the screen in Firefox on Android

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Hallvord R. M. Steen [:hallvors]]

At first sight blip.tv loads well and adapts to the screen, but when trying to play a video you'll see only half of the over-sized video player in Firefox on Android.

Comment 1

[Hallvord R. M. Steen [:hallvors]]

Some interesting CSS here: http://a.blip.tv/skin/smooth/episodePage.d7f4a0a.css, however there's also a mysterious "min-width: 940px" being set on BODY when I spoof a desktop browser as Fx Android that is not set if I spoof as Android browser.. Here's some of the relevant CSS, a bit complex:

.Theater{width:100%;background:#1a1b1d}
.TheaterContent{position:relative;width:960px;margin:0 auto}

@media only screen and (max-width:960px){.TheaterContent{width:96%;padding:0 2%}}

.EpisodePlayer{position:relative;margin-bottom:2em;padding-bottom:56.25%;padding-top:25px;margin-top:2em;height:0}

.EpisodeLite .EpisodePlayer{position:static;margin:0;padding:0;width:596px;height:334px;margin:2em 0}

.EpisodePlayer iframe,.EpisodePlayer object,.EpisodePlayer embed,.EpisodePlayer video{position:absolute;left:0;top:0;width:100%;height:100%}

.EpisodeLite .EpisodePlayer iframe,.EpisodeLite .EpisodePlayer object,.EpisodeLite .EpisodePlayer embed,.EpisodeLite .EpisodePlayer video{position:static}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait){.EpisodePlayer iframe,.EpisodePlayer object,.EpisodePlayer embed,.EpisodePlayer video{width:737px;height:439px}
}
@media only screen and (max-width:320px){.EpisodePlayer iframe,.EpisodePlayer object,.EpisodePlayer embed,.EpisodePlayer video{width:307px;height:183px}}.

Comment 2

[Hallvord R. M. Steen [:hallvors]]

hm. *Some* of the videos are too large - cross browser. I just happened to test one that was in Firefox and one that wasn't in the Android browser, it seems. Closing this.