Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Support request] Video Header error with Microsoft Edge

Home Forums Support [Support request] Video Header error with Microsoft Edge

Home Forums Support Video Header error with Microsoft Edge

  • This topic has 6 replies, 2 voices, and was last updated 3 years ago by Giulia.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #559980
    Giulia

    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:

    Edge error

    GeneratePress 2.0.2
    #560604
    Tom
    Lead Developer
    Lead Developer

    Thanks for reporting this! We’ll take a deeper look into what’s going on and will report back.

    #567111
    Giulia

    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

    #567484
    Tom
    Lead Developer
    Lead Developer

    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.

    #569650
    Giulia

    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

    #570218
    Tom
    Lead Developer
    Lead Developer

    Interesting, thanks for sharing this! Appreciate it ๐Ÿ™‚

    #570292
    Giulia

    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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.