Step by step we will demonstrate how to insert videos from YouTube onto your page

Inserting video from YouTube

Into a text editor (into articles, pages with content, landing page)

Inserting a video from YouTube works on the basis of inserting external source code, e.g. as with the donation widgets. This manual presupposes that you have already uploaded the video to your YouTube channel or you have its URL address.

Video size

The video from most of the post productions or producers is in the following format FHD 1920 x 1080 p and HD 1280 x 720 p. This size makes it possible to play the video in satisfactory quality even on large screens. The video frame on your webpage should be smaller, ideally should be of such size that even mobile users, who access your webpage, could see the video in full size. If you use a larger size, than the width of mobile displays and similar devices, the content of the page will adjust to the width, but unfortunately the videos will not. This is why we strongly recommend using the suggested video width in the YouTube code.

1. Open the YouTube page with the video you want to use on your page in your web browser.
2. Click on the link Share underneath the video.
   
   
   
   
3. Click on the first icon Embed in the open window.
   
   
4. You will see smaller preview of the video with another menu on the right. In this menu you will be able to adjust, whether you want the video to be played from the start or from a different time point (option Start at - we recommend keeping it unticked). In case you want to leave the widget on display during the playing of the video (Show player controls - we recommend keeping it ticked off).
   Continue with the button Copy, which will copy the source code into the clipboard (memory) of your computer.
   
   Notice: from this moment on do not add other information into the clipboard, since it would rewrite the code!
   
   
5. Now switch to the CMS of your webpage and open the text, into which you want to insert the video. Place the text cursor on the exact place, where you want to insert the video.
6. In the menu on top of the editor click on the last icon in the first menu called Insert/edit HTML.
   
   
7. In the open window called Embed HTML write in the textbox Name the name of the inserted video and into the textbox HTML insert the code from YouTube (in case you do not have it in the clipboard, return to the YouTube page and copy it again).
   
   If you want to change the suggested size of the video window, rewrite the figures called Width and Height and change the properties “width” and “height” in the source code to the same figures.
   
   Notice: If you do not fill in the text boxes Width and Height, the video will be displayed with the height taken over from the YouTube code and with the width calculated from the blank space.
   
   Save the figures in the window (and insert the video) by clicking the button OK.
   
   
8. An orange rectangle with a code will appear in the text instead of the video. Do not worry, only you can see this in the editor, the visitors will see the video.
   
   
   
9. And this is how the visitor sees the video:
   
   
   
   
   
10. In case you are not satisfied with for example the size of the video, you can easily adjust it by clicking on the orange rectangle with the code and clicking on the icon at the end of the first line in the editor, see step 6 of this manual.

Inserting video into graphic teaser and info boxes on the home page

Detailed instructions can be found in the article Graphic teaser.