Video Dialogs

• Aug 01, 2019
• 2 minutes to read

Video dialogs include the Insert Video and Change Video dialogs that allow end users to insert video content to the editor and change it, respectively.

A dialog can be invoked in the design view in the following ways.

• By clicking the Insert Video menu toolbar or ribbon button (that is an instance of the ToolbarInsertVideoDialogButton or HEInsertVideoDialogRibbonCommand class, respectively).
• By double clicking a video element in the editor.
• By clicking the Change Video… context menu item.
• Programmatically, by passing the ASPxClientCommandConsts.INSERTVIDEO_DIALOG_COMMAND or ASPxClientCommandConsts.CHANGEVIDEO_DIALOG_COMMAND property value to the ASPxClientHtmlEditor.ExecuteCommand method.

Dialog Structure

A video dialog contains the three tabs listed below.

Tab caption	Tab visibility	Description
From your computer	HtmlEditorInsertMediaDialogSettings.ShowFileUploadSection	Allows end-users to upload their local files.
From the gallery	HtmlEditorFileManagerSettingsBase.Enabled	Allows end-users to add to editor content video files from a predefined gallery. You can customize the gallery settings using the HtmlEditorInsertVideoDialogSettings.SettingsVideoSelector and HtmlEditorInsertVideoDialogSettings.SettingsVideoUpload properties.
From the web (URL)	HtmlEditorInsertMediaDialogSettings.ShowInsertFromWebSection	Allows end-users to upload files from the web.

When the More options check box is selected, the dialog displays the settings section, which allows end-users to customize video element settings (size, position, description and style settings such as margins, border and CSS class). You can hide the check box by setting the HtmlEditorInsertMediaDialogSettingsBase.ShowMoreOptionsButton property to false.

Dialog Customization

You can customize dialog settings programmatically by using the HtmlEditorDefaultDialogSettings.InsertVideoDialog property; or using the design-time ASPxHtmlEditor Designer.

Online Demo

Insert Media Content

Related Client API

ASPxHtmlEditor provides a comprehensive API, allowing you to operate with the opened dialog programmatically on the client side.

Dialog UI elements	Client method
Common Dialog UI elements	ASPxClientHtmlEditorMediaDialogBase.GetMoreOptionsCheckBox ASPxClientHtmlEditorDialogBase.GetOkButton ASPxClientHtmlEditorDialogBase.GetCancelButton
“From the web (URL)” UI elements	ASPxClientHtmlEditorLinkDialog.GetUrlTextBox
“Common Settings” Tab UI elements	ASPxClientHtmlEditorMediaDialogBase.GetWidthSpinEdit ASPxClientHtmlEditorMediaDialogBase.GetHeightSpinEdit ASPxClientHtmlEditorMediaDialogBase.GetPositionComboBox ASPxClientHtmlEditorVideoDialog.GetPreloadModeComboBox ASPxClientHtmlEditorVideoDialog.GetPosterTextBox ASPxClientHtmlEditorVideoDialog.GetAutoPlayCheckBox ASPxClientHtmlEditorVideoDialog.GetLoopCheckBox ASPxClientHtmlEditorVideoDialog.GetShowPlayerControlsCheckBox
“Style Settings” Tab UI elements	ASPxClientHtmlEditorEditElementDialog.GetTopMarginTextBox ASPxClientHtmlEditorEditElementDialog.GetRightMarginTextBox ASPxClientHtmlEditorEditElementDialog.GetBottomMarginTextBox ASPxClientHtmlEditorEditElementDialog.GetLeftMarginTextBox ASPxClientHtmlEditorEditElementDialog.GetBorderWidthSpinEdit ASPxClientHtmlEditorEditElementDialog.GetBorderColorColorEdit ASPxClientHtmlEditorEditElementDialog.GetBorderStyleComboBox