The header image is the default header image for the site.

Adding an ADA Compliant YouTube Video

Step-By-Step YouTube Video Embed Instructions

  1. Add an HTML block in the location you wish to display your video
  2. Copy and paste the pre-formatted code option you selected from Step 1
  3. In YouTube open the video page for the video you want to embed
  4. Copy the string of numbers and letters after the “=” in the URL. For example:
    https://www.youtube.com/watch?v=mwJ4yLPSLjM
  5. In the pre-formatted code replace VIDEO_ID with the id you just copied.
  6. Add a title for your video in place of “Descriptive Video Title“
  7. Save the page and preview the video. Test to make sure it plays with sub titles, does not auto play and responds to adjustments in page size.

YouTube Pre-Defined CSS (Options #1 & 3) Embed Code

This is the cleanest option but CSS needs to be added for it to work. Learn how or ask us to add it for you.

<div class="responsive-video">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID?cc_load_policy=1&cc_lang_pref=en&controls=1&rel=0"
    title="Descriptive title of the video for screen readers"
    frameborder="0"
    allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
  </iframe>
</div>

YouTube Inline CSS (Option #2) Embed Code

<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID?cc_load_policy=1&cc_lang_pref=en&controls=1&rel=0"
    title="Descriptive title of the video for screen readers"
    frameborder="0"
    allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
  </iframe>
</div>

Secret Link