controls stretched out of video frame

[redxtech]

controls stretched out of video frame

[thekswenson]

Thank you @jwjcmw !

[jwjcmw]

Just FYI, I brought it up in the plyr repo, and there should be a fix that takes care of it soon...

[jwjcmw]

It looks like there is a conflict between the plyr css and F7...can you inspect that play button and see what is styling it? I'm going to guess there is a "width: 100% !important" somewhere in the F7 css on a button that is overriding plyr's style.

[thekswenson]

Yikes!
Yes I find the following in the framework7.css file:

button {
  width: 100%;
}

Would you have any advice for me, or point me in the direction of some reading where for this. I don't yet have a good handle on how to limit the scope of css, as I'm rather new to all of this.

Thanks a ton for the help!

[jwjcmw]

I would probably reset the buttons within the context of the .plyr class, which wraps the buttons that are causing the problem...so you would need something like:
.plyr button { width: inherit; }
which would be added to your own css that is imported into the project.