Documentation and Code Samples
Adding YouTube videos to a web page is pretty easy, simply locate your video on www.youtube.com, click the "share" button to activate a small popup window, click on the "embed" button, copy and paste the code into your web page and you're done.
Keep in mind, YouTube uses <iframe> to embed the video. The drawback with this method is that the contents of an iframe is often clipped when the surrounding page is being resized in the browser. To keep the contents of your video from being clipped, wrap the YouTube iframe with a parent element (i.e. a <div> tag) containing the following classes: .embed-responsive and .embed-responsive-16by9.
In order to make an iframe accessible, add the following attributes on the iframe itself: aria-describedby="video-info" and title="Descriptive title about the content"
Additionally, you will need to add another element (i.e. <p>, <span>, <div>, etc) that will contain the brief description of the iframe content. Add the following attributes: id="video-info" class="sr-only", then write your description.
Note: if you are using multiple embeds on a single page, the IDs must be unique. The ID of the description must match the "aria-describedby" value on the iframe. The "sr-only" class is designed to hide the description from sighted users.
The example video scales proportionately as the browser window resizes.
This video Does NOT scale proportionately as the browser window resizes. Pay attention to the shoulders of the man wearing the white shirt and the hand of the black suit. Compare this video to the one above.
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/ThokUd1sdmw" allowfullscreen="" aria-describedby="video-info" title="Makers Lab promotional video"></iframe>
<span id="video-info" class="sr-only">Students and Faculty sharing their personal testimony on the Makers Lab at MDC</span>
</div>