Skip to Main Content
Fairfax County logo

LibGuide Editor's Guide

Making an Embedded Video Responsive

Simply wrap the embed code provided by YouTube in a div with a class named iframe-container-yt (while viewing the source code).

NOTE: Some alternative text must added before the closing iframe tag in order for an iframe to be 508 compliant. In this case the alternative text reads "Margaret Kositch on Channel 16".

Below is the code used for the video above:

<div class="iframe-container-yt"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/LPv9KXY2_Is">Margaret Kositch on Channel 16</iframe></div>

Vimeo Makes it Much Easier

One of the options from the Vimeo source would be to add as a responsive video.

Fairfax County seal