Show YouTube videos on your website

NOTE! We do not offer support for HTML code you insert yourself. This is a tip, something you can do on your website, but it is not part of our support package.

YouTube has created a HTML code that you can paste into your website.
They have changed it several times, so if it does not look exactly like this when you check, then YouTube has changed it again. The principle, however, remains the same so look for similar buttons to push.

In the image below, I have circled the button you should look for. Click on it and a new frame will appear.

Click on Share and a box will appear with the address to the YouTube video and some buttons in a row. Click on the Embed button. A larger frame will appear that contains a variety of choices, along with HTML code in a field that you are supposed to copy and paste in your website.

Choose the size of the frame you want the film shown in. You can choose one of the gray frames, or you can enter your own dimensions. Try to not exceed 800px in width. Most templates can handle 800px, but no more. A few templates are narrower so you will have to choose a smaller size. Test and see what happens. If it doesn’t fit, just redo it.

If you have text (and images) in the text field where you intend to embed the video, you need to know where you can paste the YouTube code so it does not interfere with any other HTML code.

Here are a few shortcuts that are good to know and that make it easier to copy and paste your own HTML codes:

	Ctrl-A		Select all
	Ctrl-C		Copy selected
	Ctrl-V		Paste the text that was copied

1.		Go to YouTube’s code field and press Ctrl-A to select all code and then Ctrl-C to copy it.
2.		Go to the text field, click on the pen to go to editing mode, and then click on in the toolbar
3.		Place the cursor in the code where you want to paste the YouTube code and press Ctrl-V.

Let’s take an easy one. The text field where we are going to paste the code contains the following text:

Here I write text number 1 and I want the video to be shown directly under this text.

Here I write text number 2 and I want the video to be shown directly over this text.

Now, the HTML code looks like this:

Here I write text number 1 and I want the video to be shown directly under this text.
Here I write text number 2 and I want the video to be shown directly over this text.

We need to keep an eye on:

- Ends the previous text segment

It is between these Ps that we can paste the code from YouTube.

- Starts the next text segment

This is what it looks like:

Here I write text number 1 and I want the video to be shown directly under this text.

Here I write text number 2 and I want the video to be shown directly over this text.

It is very easy if the text field to which you want to upload the video is blank.

A blank frame appears when you click on and all you have to do is paste in the code you copied from YouTube. (If there is any code in the frame - you may have clicked inside the frame and pressed Enter in the frame - just delete the code so that the HTML field is blank.)

If you’ve watched our example video with Greg Craven, you might like to know that his YouTube video got a lot of response so he made another one where he addresses many of the comments he received; see the video below. He’s made several more videos since. If you’re curious and want to know more, check out his website gregcraven.org.

Din Studio website