Navigation

Languages

How to embed a YouTube video on your page

I. Copy the "Embed video" link from YouTube

A. Go to www.youtube.com and search for the video you want to embed.

Embed YouTube

B. Below the video, click the link that says Share. Below that, click Embed:

Embed YouTube show more options

A long string of code will appear. Below it, click on the words "Show More". Several formatting options appear:

Embed YouTube options

C. Select a video size in the video size box.

D. Uncheck: “Show suggested videos when the video finishes”.

E. If you want to use the secure HTTPS option, click into the text box and replace "//www.youtube" with "https://www.youtube".

F. Select the whole embedding code by clicking and blotting or by clicking inside the code box and typing CTRL-A.

Embed YouTube copy code

G. Copy the text by right-clicking it with your mouse and selecting copy or typing CTRL-C.

II. Embed the code on your Kalaam site

A. Open your website page for editing. (If you want this video to appear on all translations of the page, repeat the following instructions to add the video to each translation of the page you are editing.)

B. In the text editor, type some text to describe the video. This will appear above the video.

C. Below the text editor box, click the grey button that says "Switch to plain text editor".

D. Paste the embed code below all the other text.

  1. Right-click on your mouse and choose paste or type CTRL-V.
  2. If nothing happens when you try to paste the text, you may need repeat these instructions from the beginning to make sure you correctly copied the embed code from YouTube.

E. The pasted text should look something like this:

Embed YouTube code in text editor

F. Make the video mobile friendly by adding the following at the beginning and end of the code:

beginning: <div class="video-container">

end: </div>

Now your code should look something like this:

<div class="video-container"><iframe allowfullscreen="" frameborder="0" height="500" src="https://www.youtube.com/embed/-lyMWgQNxnE?rel=0" width="100%"></iframe></div>

G. Switch the text editor back to rich text by clicking the grey button that says "Switch to rich text editor".

H. Scroll to the bottom of the page and click Save.

I. After you click save, the system should load a preview of your page.

K. Paste the same code into each translation of your page.