Black frame surrounding the embedded video

Cheen · December 17, 2013 at 6:02 PM

I ask, why do I embed the video as a hot spot to the scene, there is a black line around the video (html5)
Hurry, thank you！

klaus.krpano · December 19, 2013 at 8:44 AM

Hi,

the css3d transformed rendering of the video depends on the browser itself.

Which browser and system are you using?

Best regards,
Klaus

Cheen · December 20, 2013 at 1:35 PM

Hi, Klaus
I use win7 system, firefox browser and Google browser testing, using the. MP4 format video, you can see on firefox, also in chrome black border point, why the black border around there, mac's safari?

Thanks,
Cheen

klaus.krpano · December 23, 2013 at 6:03 PM

Hi,

are you sure that there is no black border in the video itself?

Several video encoders are rounding the video sizes up to by 4/8 or 16 dividable sizes and filling the new space with black color...

But the fault can be also on the side of the browser - when the browser is rendering or decoding the video this way, there is no much can what could be done from script side...

Best regards,
Klaus

tomdanvers · May 9, 2014 at 5:52 PM

I had this problem and fixed it by setting the background-color css property of the html5 video element to 'transparent'.
By default it is styled to black (rgb(0,0,0)) which causes the black lines to appear in some browsers.
In your css you need to apply the following style to any video element nested within your krpano div.

CSS

video {
background-color: transparent !important;
}

Although this is an old post I thought this reply may help other users who have this problem...

klaus.krpano · May 9, 2014 at 6:40 PM

Hi,

thanks for that hint!

I will add that directly to the videoplayer.js in the next release.

Best regards,
Klaus

nosferatu · July 23, 2014 at 10:54 AM

CSS

video {
background-color: transparent !important;
}

This works well in Сhrome. But does not work on IOS.
Are there any ideas on IOS?

UPD:
I think the problem in this iPhone Video PlaceHolder:

Participate now!