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

<li>
<video>...</video>
<p>...</p>
</li>

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

section#videolist li {
	position:relative;
}
section#videolist li p {
	display:none;
	position:absolute;
	bottom:-100px;
	left:0;
}
section#videolist li video:focus+p {
	display:block;
}

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.

1 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 *