Smart.Editor Videos

Editor Videos

Smart.Editor can contain videos as well as images, tables and hyperlinks. Videos can be uploaded from local storage or YouTube embed.

YouTube embeded videos use iframes in order to be played via the YouTube player while videos uploaded from local storage use the native HTML5 video tag player.

Videos inserted via the Editor's toolbar can be resized dynamically. Local storage videos can even be dragged. However if the video is not inserted via the Editor it will still be rendered but it will lack those features.

We are going to take a furtuher look into Smart.Editor videos and how to use them in the next section.

Editor Videos Inserting

To insert a video in the Smart.Editor first you need to have the video toolbar item as part of the toolbarItems property. It is enabled by default.

Then:

  1. From the Editor Toolbar click on the video item positioned next to the image item:

    Demo

  2. An Editor Dialog will appear with several fields and controls:

    • A Smart.FileUploader element which allows to upload a video file from local storage. If the user prefers to reference a YouTube video instead then this field should be left blank.
    • A Smart.Input element which allows to enter the url to a YouTube embed video if a local file is not uploaded in the previous control. Links to embeded YouTube videos are obtained from their official website.
    • A Smart.Input field that allows to enter the width for the video. By default a 480px is preset for the width since that is the recommended value for a video by YouTube to mantain the 16:9 ratio aspect.
    • A Smart.Input element that allows to enter the height for the video. By default 270px is preset for the height.
    • A Smart.Input element that allows to set the title for the video. The title will appear when the video is hovered.
    • A Smart.Input element that allows to set the caption for the video. The caption is displayed below the video and can be modified later.
    • A Smart.Input element that allows to set the display and alignment settings for the video. It can be positioned as inline or block element and can be aligned to the left/right or center.
    • A Smart.Checbox that allows to configure whether the video is resizale/draggable or not.

      Note:

      Videos can be resized/dragged only if they are inserted via the Editor Dialog.

      YouTube videos cannot be dragged while videos uploaded from local storage can.

    Here's what the Editor video dialog looks like:

  3. Clicking on the OK button will submit the dialog and create the video inside the Editor.

Once the video is properly configured it will appear as follows:

The Menu icon that is visible in the image above represents a button that appears when the video is hovered. It is not displayed by default to not interfere with the video playback.

The video menu button can be interacted with:

  • Left mouse click on the menu button will select the video and set a resize frame around it (if resizing is not disabled for the video). The resize frame allows to resize the video dynamically from one of the handles.

    The video can be dragged after it has been selected (by clicking on the menu button). This works only for non YouTube videos since they use an iframe element. You can begin dragging the video from the video itself (not from the menu button or the resize handles) and you can drop it anywhere inside the Editor.

    Here's an example drag and drop of a video uploaded from local storage:

  • Right mouse click on the video menu button triggers the context menu for Editor videos. The context menu allows quick actions to be executed. For example:
    • Edit the video from the Video Properties context menu item.
    • Copy the video.
    • Cut the video.
    • Delete the video.
    • Insert/Remove the caption of the video.

    The context menu items can be customized via the contextMenuDataSource property. It is possible to add additional or modify the existing menu items.

Smart.Editor videos can be copied/cut and pasted once the video is selected by clicking on the menu button inside it.