HTML <video> element scenarios to play on mobile Safari after using CSS animations
After trying multiple solutions online, I still can't figure this out. I'm dealing with I can't seem to get I've been struggling with an scenario where a <video> element doesn't play on mobile Safari after applying a CSS animation to it. I'm using the following HTML structure: ```html <video id='myVideo' controls> <source src='video.mp4' type='video/mp4'> Your browser does not support the video tag. </video> ``` And here is the CSS animation I applied: ```css #myVideo { animation: fadeIn 2s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } ``` After the animation completes, tapping the play button does nothing. I don't even see an behavior in the console. I've tried removing the animation, and the video works perfectly then. This scenario seems specific to mobile Safari, as it plays fine on other browsers and desktop versions. I've checked the following: - Verified that the video file is compatible with mobile Safari (H.264 encoded). - Ensured that the video is not muted, as I've seen that could prevent autoplay. - Tested the page in private browsing mode to rule out any caching issues. Additionally, I tried adding `playsinline` attribute to the <video> tag: ```html <video id='myVideo' controls playsinline> ``` Still no luck. Has anyone encountered similar issues or have suggestions on how to resolve this? Any insights would be appreciated! I'm developing on macOS with Html. I'm open to any suggestions. How would you solve this? I'm coming from a different tech stack and learning Html.