CODEWITHSUNDEEP
htmlcssvideocss-animations
Kokodoko
Kokodoko

Reputation: 28128

HTML5 video stops when CSS animation plays

I have a html video tag with autoplay:

<container>
    <video src="./images/grid.mp4" preload autoplay loop muted></video>
</container>

The autoplay actually works, but the video stops if the parent element has a CSS animation:

container {
    animation: RotateColor 7s ease infinite alternate-reverse;
}

@keyframes RotateColor { 
    0% {
        transform: scale(1);
        filter: hue-rotate(0deg);
    }
    100% {
        transform: scale(1.02);
        filter: hue-rotate(130deg);
    } 
}

Is this intended behaviour? Can't I use CSS animations or filters on playing video?

The CSS animation DOES work when I use an animating GIF in the background, but I've read that an MP4 should have much better performance than a GIF.

Sideways related, playing this video with other html elements on top of it causes my laptop fans to spin like crazy, CPU goes to 90%... Is there a way to mitigate this? I am scaling a small video (640 * 480) up to 1440 * 900 in the background of the website. Is the scaling the problem?

Upvotes: 0

Views: 837

Answers (2)

Bhaskar
Bhaskar

Reputation: 49

I tried with the same set of animations as posted by you and its working fine.

I think that the playsinline attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline) may be required when resizing the video element and can help here if it's not working for you.

Upvotes: 0

Byrm Arf
Byrm Arf

Reputation: 114

You can't use preload and autoplay both, if i know correctly

Note: The preload attribute is ignored if autoplay is present.

Source: w3schools

Upvotes: 2

Related Questions