A quick CSS3 sibling test with the video tag

I am working on a little widget that uses the html5 video tag on one of my test sites: Fyvr.net.
I wanted to display related information when the video is playing. The sibling selector makes this easy.

Here’s the basic markup


I wanted the paragraph to appear when the video is selected. So here’s the simple CSS

section#videolist li {
section#videolist li p {
section#videolist li video:focus+p {

The sibling selector (+) is telling the browser to display the paragraph as block when its video brother has focus. This is a rough test. There could be some accessibility issues and I’ll need to test this out. Obviously this will not work in Internet Explorer.

Author: Ted

Accessibility is more than making sure images have alternate text. I work with engineers, product managers, and designers to understand how accessibility impacts the users, set realistic deadlines, and create the solutions to provide a delightful experience to all users, regardless of their physical, sensory, or cognitive ability.

One thought on “A quick CSS3 sibling test with the video tag”

  1. I’ve been playing with this a bit more. Using display:none/block is a bad method. i switched to position absolute with negative indent. This makes it much more reasonable for screen readers.

    there are some other issues with transformations, scaling, and how the browser determines the size of the paragraph.

Leave a Reply

Your email address will not be published. Required fields are marked *