Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update video-autoplay.css #30

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions css/video-autoplay.css
Original file line number Diff line number Diff line change
Expand Up @@ -105,3 +105,29 @@ amp-story .amp-video-eq {
0% {transform: translateY(100%);}
100% {transform: translateY(0);}
}

/* Possible Issues:
1.animation-play-state` Not Toggling Correctly:
- The `animation-play-state` should switch between `running` and `paused` based on whether the video is playing or paused. If `.amp-video-eq-play` is not correctly added or removed, the animations might not start or stop as expected.

2.Unnecessary `!important`:
- The use of `!important` on `pointer-events: none !important;` in `.amp-video-eq` might override necessary interactions if not carefully managed.

Suggested Improvements:

- Ensure the JavaScript controlling the video state properly toggles the `.amp-video-eq-play` class.
- Verify that `pointer-events: none !important;` is necessary and doesn't interfere with other interactions.
- Ensure that elements with the `noaudio` attribute are correctly preventing the display of `.amp-video-eq`.

Here is the key part that might require attention:

```css
.amp-video-eq-col div {
animation-play-state: paused;
}
.amp-video-eq-play .amp-video-eq-col div {
animation-play-state: running;
}
```

Make sure the `.amp-video-eq-play` class is being correctly toggled on the parent element when the video is playing or paused. If the class is not added or removed correctly, the animation states will not be applied properly, leading to the animations not starting or stopping as intended. */