Do you want to add a video to your website? You can do this by first uploading the video to YouTube and then embedding the clip on a page. We’ve outlined the process below, step by step. But first, you might be wondering…
Why Do We Use YouTube?
It is possible to upload a video and insert it onto your website, using the same steps you would use when inserting a photo or PDF. So why do we upload it to YouTube first?
Uploading a file as large as a video can drastically slow down the speed of your website. If a lot of people try to view the video within a short time, it can also cause the entire website to crash. To avoid this, we upload the video to a third party (like YouTube) and then embed it. This means the video will be displayed on the page, without putting any extra strain on your website.
Step One: Upload the Video to YouTube
The first step is to upload your video to YouTube. If you haven’t done this before, you can follow the instructions here.
Step Two: Copy the Video
Open the video in YouTube.
Click on the “Share” button below the video.
Click on the “Embed” tab
A snippet of code will appear that starts with <iframe… This is what you will need in order to embed the video on your website. However, before you copy it, press the “Show More” button below.
This section controls how the video appears on your page. You’ll notice that the iframe code above will automatically update when a setting is changed.
You can choose to:
- Change the video size
- Remove the video title and player actions when it appears on the website.
- Show suggested videos when the video finishes (turning this off means that YouTube will not display suggested videos to your website visitors after they’ve finished watching your video).
Step Three: Embed the Video onto Your Web Page
Copy the iframe code we generated in Step 2.
The steps required to embed the video will differ, depending on whether your website is:
Website Baker
Login to your website and open the page you would like to edit.
Click on the button that says “Source”. This will display the page as HTML code.
Paste the iframe on to the page. When you press the “Source” button again to hide the HTML code, the video will appear as a box with the word ‘iframe’.
If you are adding the video to a page that already contains text and photos, it can be hard to sift through the HTML code and figure out where to paste the video. In this case, I’ll often add it to the top of the page and then switch the source code off. After this, you can highlight and drag the video to a different location on the page.
Then save the changes and view the page to ensure it’s displaying correctly.
WordPress
Login to your website and open the page you want to edit.
Above the text editor, click on the Tab that says “Text”. This will then display the page as HTML code.
Insert the iframe into the text editor. When you press the “Visual” tab to hide the html code, the video will appear on the page.
If you are adding the video to a page that already contains text and photos, it can be hard to sift through the HTML code and figure out where to paste the video. In this case, I’ll often add it to the top of the page and then switch the source code off. After this, you can highlight and drag the video to a different location on the page.
Then save the changes and view the page to ensure it’s displaying correctly.
WordPress with Page Builder
Login to your website and navigate to the page you would like to update.
Launch Page Builder.
Under Basic Modules, find “Video”. Click and drag it to where you wish to embed the video.
Change the video type to “embed”
Copy and paste the iframe code into the field below
Press Save
Don’t forget to publish your changes before exiting.
