HTMLPlaceHolder cuts off HTML5 Player controls in Firefox

[Javier]

Hi,

I'm using this particular control to  go to a particular website to view a page that has a HTML5 player in it.

HtmlHolder.SourceUrl = new Uri(string.Format(@"http://website.com/Home/ViewVideo?mediaid={0}",media.ID), UriKind.RelativeOrAbsolute);

The page renders fine for the most part, but the player controls are clipped, hiding the maximize button on the right. If I view the page in Firefox on it's own, then you see all controls.  Anyone mind telling me what may be going on here?  IE and Chrome have their native players shown correctly.

[Zarko]

Hi Javier,
Could you please send us a precise video link so that we could investigate the issue on our side because we weren't able to reproduce it. We'll appreciate it if you could send us some pictures also.
I've attached my test project so that you could examine it and tell us if it works fine on your side.

Regards,
Zarko
Telerik

 

 

[Javier]

Zarko,

Controls are still being clipped.

For a reference, I am using http://www.html5tutorial.info/html5-video.php as an example.

The first attached pic is firefox, going directly to the page itself.
The second pic is in firefox, running the silverlight application.

[Javier]

And let me reiterate, this is not a Flash version of the player, this the native Firefox player in HTML5.

[Pavel R. Pavlov]

Hello Javier, 

I tried to reproduce the reported behavior on our side with the project provided by Zarko and the code works as expected on our side. You can see how I tested the provided link in the project in this screencast.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Javier]

Pavel,

It does not work as expected.  Yes, the player comes up.  But look at 0:36-0:37 of the screencast.
The controls are there, yes.  Look closely, the maximize button (the four arrows diagonally), does not appear; it seems to be cut off.  

See my earlier post with the picture (player-in-firefox.png), and you'll see what I mean.

[Zarko]

Hi Javier,
Thank you for the detailed explanation. We're able to reproduce the issue but unfortunately it seems that the problem is in the way Firefox displays IFrames - when you use the RadHtmlPlaceholder in windowless mode we place it inside an IFrame that is over the Silverlight plug-in.
In the attached project you can see that if you directly use an IFrame to display the html5tutorial page the issue will present in Firefox (it's fine in IE and Chrome).
Unfortunately at the moment there's not much we can do but if you have further questions feel free to ask.
p.s. After some research we found out that if you add "allowfullscreen" to the IFrame it starts working correctly if Firefox:

<iframe src="http://www.html5tutorial.info/html5-video.php" width="100%" height="100%" allowfullscreen />

You can do this in code behind with something like this:

var iFrame = this.holder.HtmlPresenter.GetProperty("innerHTML").ToString();
iFrame = iFrame.Insert(7, " allowfullscreen");
this.holder.HtmlPresenter.SetProperty("innerHTML", iFrame);

Regards,
Zarko
Telerik