How To Embed Videos Using HTML
I am very excited to be almost done building out my personal portfolio page and deploying it for the world to see. One of my last steps is posting information about the projects I have completed to show off my work, and I want to embed the demo videos I made that walk through my projects. I’m sure I’m not the first or the last that will do this, so I’m going to walk through some steps to get your videos up as quickly and painlessly as possible.
1. Upload your videos to YouTube.
If you haven’t done this before, it’s pretty simple! Log in to your YouTube account (or create one if you haven’t already). There’s a button on the upper right hand corner of the page that looks like a camera with a plus sign on it:
Click on that, then the upload video button, and the page should look like this:
Now, you can drag and drop your video file and it will upload to YouTube! Easy as pie.
2. Use the <iframe> element on your HTML page.
The <iframe> HTML tag stands for “inline frame,” and is used to embed another document within your HTML file. This is the tag that you will use to embed your video.
<iframe></iframe>3. Point the src attribute to the URL of your YouTube video.
<iframe src="https://www.youtube.com/embed/hhK7M_CAPAU"></iframe>4. Insert width and height attributes.
<iframe src="https://www.youtube.com/embed/hhK7M_CAPAU" width="560" height="315"></iframe>5. Add other attributes as needed.
There’s quite a few other parameters that you can add to the <iframe> tag, including:
- allowfullscreen: allows a user to expand the YouTube video to take up the entire screen of their computer
- URL parameters: in the SRC attribute, you can also add parameters. Check out more details at this W3Schools article. Here is an example of the same <iframe> tag as above, but with a video that starts automatically and muted:
<iframe src="https://www.youtube.com/embed/hhK7M_CAPAU?autoplay=1&mute=1" width="560" height="315"></iframe>Hint: Always add a question mark after the URL, and separate each parameter with an ampersand.
And it’s that simple! Uploading media to your projects are much easier than you’d think, especially with easy-to-use video hosting platforms like YouTube. Hope this helps you take you projects to the next level!
