Archived topic
Video Header error with Microsoft Edge
6 replies · Started by Giulia on April 25, 2018
Hello,
I'm using a video header on my website. It works fine in all browsers except Microsoft Edge.
With Edge the video stutters, the initial dimension is not fullscreen and checking with the console I recive the "MEDIA12598: Independent composition is disabled for video rendering. This can negatively impact performance" error.
You can check the problem on the Generatepress website too:
http://demo.generatepress.com/page-header/
it's slightly less evident but the problem is the same.
This is a screenshot of the console error:
https://imgur.com/a/orSkUrV
Thanks for reporting this! We'll take a deeper look into what's going on and will report back.
Hello Tom,
any news?
I'm about to put the site live and I still haven't find a way to fix the problem :(
Thanks
Nothing yet unfortunately. I'm seeing the smaller dimension snap to full screen (Edge is awful), but I'm not seeing any console errors.
I'm hoping to have it fixed in GPP 1.6.3, which is scheduled to be released in 2 weeks.
For now if you need Edge support 100%, you might need to use an image placeholder.
Hello Tom,
I managed to eliminated the "snap to fullscreen effect" with a bit of custom css:
.generate-page-header-video > video:nth-child(1) {
margin: auto;
position: absolute;
z-index: -1;
top: 0px !important;
left: 0px !important;
transform: none !important;
visibility: visible;
opacity: 1;
width: 100% !important;
height: auto;
}
instead of using the deafault:
.generate-page-header-video > video:nth-child(1) {
margin: auto;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: visible;
opacity: 1;
width: 1691px;
height: auto;
}
Hope it can be usefull to you!
Giulia
Interesting, thanks for sharing this! Appreciate it :)
Yup,
mine it's a temporary solution, (because with my css the video do not properly resize and center when not on a large screen),but I think it's the
transform: translate(-50%, -50%);
that gives problem with Edge. As soon as I use a transform the problem reappears.
Giulia
