JSmith Embedding Video Tutorial From YouTube

The setup for embedding a video in HTML/CSS is very similar to that of embedding audio. I will use a video of the great Elvis Presley performing live in concert during his 1968 Comeback Special! This method for embedding a video applies to almost all videos on YouTube.

The first step of embedding a video is to use the video tag to let HTML know that you will be embedding a video. However, since I am embedding a video from YouTube, I will not need to do that. Instead, I need to open the link of my video, which is here.

Now that I am at the site of the video that I wish to embed, I now need information to embed the video on my site. If I were to just copy and paste the link in my website, I would not be able to play it, but would rather click the link and go to YouTube. That is not what I want to accomplish as I need to somehow embed the video into my website. To do this, I will click on the share button, which is located just to the bottom of the video, and right next to the save and dislike buttons.

Once you click the share button, there are several different sharing methods that pop up. For our purposes and to be able to embed the video, we will click the embed option.

Now that the Embed method is clicked, the code required to embed the video appears. This code uses the iframe tag which indicates that the video will be embedded at a size of 560 pixels wide and 315 pixels tall and will be playable from our webpage. There is two ways to acquire this code.

  1. Simply click the copy button.

    2. OR

  2. Highlight the code and right click, then copy it

Now that you have the code copied, it is time to paste it!! Open your desired HTML document where you would like the video to be embedded, and paste! Now you are done!!

The Finished Product! Enjoy!