Micorosoft Edge places video at the top left of the screen in vegas slideshow

[danb235]

With Microsoft Edge photos load fine just as they do in other browsers.

Videos however appear to not resize with the window and instead load on the top left corner with their original dimensions. In other browsers the video fills the entire window. Here is an example (the vegas element has 100% width and height):

[danb235]

Here is a screenshot with Google Chrome on the same Windows 10 machine:

[jaysalvat]

Hello.

It seems IE Edge has a hard time with full-width / height video.

I'm on MAC, so I can't really work on it. Help needed.

Some clues:

CSS: https://github.com/jaysalvat/vegas/blob/master/src/vegas.css#L50-L55

JS: https://github.com/jaysalvat/vegas/blob/master/src/vegas.js#L397-L407

Thanks!

[tcastelli]

+1, this only happens when you stick vegas inside other elements and not direcly to body(otherwise it works fine). Any luck trying to solve it @tkdan235 ?

btw just by checking the result of the video tag inserted i can see that no csss i attached at all (not even width:100% and height:100%)

<video class="vegas-video" style="background-color: rgb(255, 255, 255);" preload="true">
<source src="./assets/video/small.mp4">
<source src="./assets/video/small.webm">
<source src="./assets/video/small.ogv">
</video>

Update: I couldn't solve it no matter how, so for now this was the best approach

tjq.vegas.isVideoCompatible = function () {
    var devices = /(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone|Edge)/i;
    return !devices.test(navigator.userAgent);

[danb235]

I played with it for a bit, but haven't had any luck. This is definitely something funny with Edge... I have bigger fish to fry at the moment but will come back to this.

I did the same thing btw, I detect if the browser is running edge then just disable video.

[jaysalvat]

@tkdan235 Thanks for your help.

FYI, Vegas has a method to check if the browser has to display video backgrounds or not on some devices. Overwrite it with the Edge information added somewhere.

$.vegas.isVideoCompatible = function () {
    var devices = /(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone|Edge)/i;
    return !devices.test(navigator.userAgent);
}

This way, your video backgrounds will be ignored by Vegas on Edge.

[shrmnk]

Note sure if this will help, but there is a website (not on Vegas) that has fullscreen videos working on Edge. http://gentlebones.com

This block of CSS was what he uses:

.theatre {
    position:absolute;
    overflow:hidden;
    width:100%;
    height:100%;
    background:#000;
}

.theatre video {
    position:absolute;
    display:block;
    min-width:100%;
    min-height:100%;
    opacity:.8;
}

.dragslider.switch-min .theatre video {
    height:100%;
}

[jaysalvat]

Hey ! Thanks @ShrmnK !

Does somebody can make some changes and tests in the vegas css and test the whole thing on Edge and check if nothing is broken for other browsers. https://github.com/jaysalvat/vegas/blob/master/src/vegas.css#L50

Thanks.