How to Embed a YouTube video on your website

Adding video content to your website is a great way for your content to come alive for your visitors. You should use a hosting service like YouTube or Vimeo for your videos. They take care of all the important stuff when it comes to video on the web. You shouldn't try to upload a video directly to your website. Instead, once the video is on YouTube or Vimeo, you'll then "Embed" the video with some code to appear on your site. it is easy as can be to quickly get videos to appear on your website.

To add a video, follow these simple instructions.

A) Getting the Embed Code ...

...from YouTube

Follow these instructions from Google: https://support.google.com/youtube/answer/171780?hl=en

"On a computer, go to the YouTube video you want to embed. Under the video, click Share then click Embed. From the box that appears, copy the HTML code."

... from Vimeo

Follow these instructions from Vimeo: https://help.vimeo.com/hc/en-us/articles/224969968-Embedding-videos-overview

"To get your video's embed code, go to its video page and click the "Share" button. Then click the "+Show options" link that appears above the embed code field to reveal a preview of your embedded video with the Basic customization options. Once you've made your adjustments, you can copy the embed code"

If your video is hosted somewhere else, follow the instructions of that provider to obtain the embed code.

B) Adding the Code to Your Website

Once you have the embed code, log into your website and navigate to the page where you want to add the video.

See the graphic below for a visual to accompany each of the following steps.

  1. Once you are in edit mode on the page, click on the Insert Media button.
  2. Click the Embed tab. Paste the embed code where you want the video to be displayed within the page.
  3. To ensure the video displays nicely no matter what size screen or device your users have. Do two things:
    1. Add this line before the iFrame code: <div class="responsive-iframe-container">
    2. Add this line after the iFrame code: </div>
  4. Once finished, click OK and then Save your page.