This is clever. But is it an optimization or necessity? There are many more playable elements. If necessity: one option for us is to simply do ...:not([expanded]) .i-amphtml-fill-content. That might catch more cases than we want, but should be pretty close. But before you do this, please explain whether this is necessary and why.

Why is .i-amphtml-fill-content an appropriate catchall for playable elements? It looks like it is applied to many non-video cases, i.e. amp-list subelements which are more likely to contain searchable content and therefore which we don't want to hide.

As for why this is necessary -- without this change, playable elements can continue playing within the collapsed section.

/cc @alanorozco who had some ideas about precisely selecting playable elements.

#26967 should be merged before we go forward with the change, though I have updated the selector accordingly here.

TBH, we could even just catch all AMP elements here. :not([expanded]) .i-amphtml-element { display: none}. Right?

And to clarify one more time: did you test that when this version of accordion is closed, the video players indeed stop playing?

I'm not sure this makes sense for i.e. amp-list rendering text, amp-truncate-text, amp-fit-text, etc. where we could get a lot more by making those available. For the components that are neither media players nor text heavy, I don't see huge need for them to be display: none or not, so it may be better to get the gains by selecting for media players explicitly over all elements.

Right. That's actually a pretty bad idea. Thats for catching that and let's not do that :)

However, please confirm: re video player stopping to work correctly with this experiment.