OpenCms
knowledge base

Embedding YouTube videos

1. In this example, we will embed a YouTube video directly within a text page. First, open the relevant YouTube page.

Hint
The video needs to be pre-loaded on YouTube.

2. Click the Embed button beneath the YouTube video:

Getting video embed code from YouTube

3. The Embed screen will appear. By default the size of the video is set to 560 x 340 pixels (small) but you can select other sizes (640 x 385 pixels, 853 x 505 pixels etc) or set custom dimensions. When typing in custom pixel dimensions the aspect ratio is maintained.

Altering video embed sizes on YouTube

4. Once you have selected the correct size (or left at the default), place the cursor in the Embed script area, right-click and select copy (or simply press Ctrl + C after highlighting the script).

Copy YouTube code

5. Next, open the OpenCms page editor.

Edit page in OpenCms

6. Press Source (OpenCms Source button) at the top to view the HTML source code for that page. Place the cursor at the end of the page and paste the YouTube script.

Paste YouTube source code

7. Press Source (OpenCms Source button) again to return to standard editor view. The video will appear as a blank box which you can move around on the page as desired:

Moving video in OpenCms editor

Hint
You will only be able to view the video in the preview screen.

8. When you are done editing, save and close and click the page name to preview. Play the video and test the embed.

Preview YouTube video

9. When you are ready to go live, Publish (Publish changes) changes.

Hint
If you wish to hide related videos from the embedded version at the end of play, simply add &rel=0 at the end of the YouTube link in the embed code. 
Next page: Creating anchors
background

We specialize in the design and development of CMS websites. Drop us a line to discuss your project requirements.