How To Embed a Video in HTML - Text Version
Step 1.1: Prepare Your Programming Environment
Begin by opening up your code editor. There are many free code editors out there like Replet, VS Code (we'll use this for this demonstration), Codecademy, and much more. Below are links to these sites.
Step 1.2: Organize Your Files
Begin by organizing your files and create an index, style, and a media folder. Again, in this demonstration, we'll be using VS Code. We need to create a folder to store our project. To create a folder on your desktop, two finger click on the desktop anc click on "New" > "Folder". Proceed to name your project and do the same with your media folder. When you create your media folder, drag it to the project folder. When you open your project, it should look like the second picture.
Step 2.1: Preparing Your HTML File
Now that you have your folders, we'll go ahead and set up your HTML file. Begin by opening up VS Code (or whatever you're using) and select "Open Folder". From there, locate your project and "Select Folder" to open it. Your editor should now look like the third picture below.
Step 2.2: Creating an Index File
In this Tutorial, you'll be given the starting code to make things quicker. But first, we need to create an HTML file. To do so, go to the explorer and click on "New File". VS Code will then ask you to name the file. Call it "index.html". This will be your "main" file.
Step 2.3: Starting Code
Again, in this Tutorial, you'll be given the starting HTML code. This can be found here:
Copy and paste this code into your editor. It should look like this:
Please take note that we deleted the two paragraphs. We won't need them for this Tutorial.
Step 3.1: Getting the Embed Code
There are a couple of different ways we can embed videos. In this Tutorial, we'll show you how to embed a
YouTube video...
To embed a YouTube video, look up your favorite video on the internet. We'll use this cute video of a duck walking in this
example. Begin by going to the video and clicking on "Share". You'll then see an option to embed. Click
"Embed" and copy the code given.
Step 3.2: Embeding the Video in HTML
Finally, paste the code in the body tags. Your final file should look like this:
And you're done! We didn't use the media folder, so you can freely delete that if you'd like to do so. But good job! You've embeded your first video!