Insert YouTube video

  Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic! Mail us feedback on this topic!  

Using this dialog, video from YouTube can be easily added to a page. The dialog can be opened using the Insert YouTube video (fckYouTubeVideo) button on the WYSIWYG editor toolbar, as you can see in the screenshot below:

 

devguide_clip0815

 

Inserting YouTube video

 

The general process of inserting a YouTube video is the following:

 

1.Place the cursor at the appropriate position in the text area and click the Insert YouTube video (fckYouTubeVideo) icon.
2.The dialog opens.
3.Insert the URL of the YouTube video into the URL field and click the RebuildIndex icon.
4.The entered URL gets checked and if it is valid, default properties will be loaded and preview displayed.
5.Specify the video's properties according to your needs. The changes you make are reflected in the preview in the right part of the dialog.
6.When you are finished with the properties, click the Insert button.
7.The video is inserted into the text area.

 

YouTube video properties

 

The following properties can be specified in the dialog:

 

URL: URL of the YouTube video; you can copy&paste it from your browser's address line or from the URL field on the video's page

 

Allow full screen: indicates if the control to switch playback to full screen will be available in the video toolbar
Autoplay: indicates if playback starts automatically when the page is loaded
Loop: indicates if playback is continuously repeated in a loop
Include related videos: indicates if related videos will be displayed when playback finishes
Enable delayed cookies: indicates if delayed cookies should be used, read here for more information
Play in HD: allows to play the video in HD by default; the user can switch back to normal quality by pressing the HD button while playing the video

 

Default color: you can choose one of the default color combinations which will be filled in the Color 1 and Color 2 properties
Color 1: color of the border around the player, relevant only if the Show border property is enabled
Color 2: color of the player toolbar

 

Default size: you can choose one of the default sizes of the video player which will be filled in the Widht and Height properties
Width: width of the video player
Height: height of the video player
Show border: indicates if border should be shown around the player; enabling this option adds 20px to both width and height of the player

 

This is what the dialog window looks like when a video is loaded:

 

devguide_clip0839

 

In the WYSIWYG editor, the video itself is not displayed. You can only see a box with the YouTube logo in the middle to give you information about the player size:

 

devguide_clip0862

 

YouTube video is generated as the YouTubeVideo inline control, as you can see in the code sample below:

 

{^YouTubeVideo|(url)http://www.youtube.com/watch?v=VtzdJrKmUhs|(width)320|(height)198|(fs)true|(autoplay)false|(loop)false|(rel)true|(cookies)false|(border)false|(color1)#3A3A3A|(color2)#999999^}

 

On the live site, the video is displayed in the player:

 

devguide_clip0865

 

Page url: http://devnet.kentico.com/docs/devguide/index.html?insert_youtube_video.htm