Video Pop-in Widget

 

The Video Pop-in widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets Set-up Guide.

 

Introduction

The Video Pop-in widget lets you display a pop-in containing a video.

This video can be hosted on: YouTube, Vimeo, Dailymotion, Facebook or TikTok. 

It can also be an .mp4 file (works with .ogg and .webm too) hosted on your server.

This widget can be used if you want to catch your visitor’s attention concerning specific content, if you want to display videos in a dynamic way or if you want to display a full-screen interstitial.

 

Layout tab

72.png

Select a layout

There are five different layouts: four with text (video on the right, video on the left, video below, video above) and one without text (video only). By default, the "video only" layout contains a button, but you can remove it.

73.png

74.png

75.png

76.png

77.png

Video over text ratio

For the "video on the left" and "video on the right" layouts, you can decide on the video over text ratio. By sliding the cursor along the axis, you can configure the video to take up 20% to 80% of the available width inside the widget container.

78.gif

Dimensions

Widget dimensions based on content

By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about modal dimensions. Your pop-in will adapt accordingly based on the video (and text) dimensions.

If you untoggle this toggler, you will be able to define both the width and height of the pop-in. These can be configured (independently) in several dimensional units:

  • px (pixels)
  • % (percentage)
  • em (element, which actually means that it is based on the size of the text of the element: if your font size is 18 px, then 1 em = 18 px)
  • vw (1/100th of the window's (or viewport) width)
  • vh (1/100th of the window's (or viewport) height)
  • vmin (whichever is the smallest of vw or vh) 
  • vmax (whichever is the highest of vw or vh)

79.gif

If you're digging the dimensional units in CSS, we strongly recommend reading this W3C article.

Preserve ratio (automatic height)

If you don't want to manage the height of the pop-in, you can keep this toggler toggled by default and the height of the pop-in will adapt according to the video dimensions and the video over text ratio.

80.gif

Known issue: the widget configuration form not overlapping the website

In the past, we've chosen to make the widget configuration form not overlap the website for cases where a widget is to be positioned in a corner or on the left side. Once you've finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width.

81.gif

Layer

Layer Position (z-index)

Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget’s position: above everything, below everything, or precisely fine-tuned.

82.png

Please read the dedicated article on the matter: z-index.

 

Content tab

83.png

Video URL

As this widget is a video pop-in, the first thing you will be asked to do is paste the video URL.

The widget supports video URLs from:

  • YouTube
  • Vimeo
  • Dailymotion
  • Facebook
  • TikTok
  • And any MP4 file path

and will adapt its player but will also display advanced parameters for each case (except for Facebook and TikTok - no advanced parameters).

YouTube

The advanced parameters will be: 

  • Autoplay (toggled by default)
  • Mute (toggled by default)
  • Loop (toggled by default)
  • Start x seconds from the beginning (default is 0 sec.)
  • End x seconds before the end (default is 0 sec.)
  • Display controls (untoggled by default) - If controls are displayed, you will have two options available for the player color: YouTube red (default) or white.
  • Authorize full screen (untoggled by default)
  • Enable keyboard shortcuts (untoggled by default)
  • Display subtitles (untoggled by default) - We cannot detect if the video contains subtitles. Toggling it on for a video without subtitles will have no impact.

Vimeo

The advanced parameters will be: 

  • Autoplay (toggled by default)
  • Mute (toggled by default)
  • Loop (toggled by default)
  • Start x seconds from the beginning (default is 0 sec.)
  • Player color (#57B8C7 is set by default)

Dailymotion

The advanced parameters will be: 

  • Autoplay (toggled by default)
  • Mute (toggled by default)
  • Show Dailymotion Logo (untoggled by default)
  • Player color (#57B8C7 is set by default) - You can override the default Dailymotion player color only if the administrators of the Dailymotion channel haven’t defined it. In this case, you cannot override it. We cannot detect whether the player color is already set so we will always display the color picker, but a color change will have no impact.

MP4 file

If your videos are hosted on your server and you don't want them to be hosted on broadcasting platforms, you may be interested in providing the direct URL to the file. In this case, the widget will display a default HTML5 video player (renderings may differ from one browser to another). The widget also supports .OGG and .WEBM files.

The advanced parameters will be: 

  • Autoplay (toggled by default)
  • Mute (toggled by default)
  • Loop (toggled by default)
  • Display controls (untoggled by default)

84.gif

Title

For the first four layouts (video on the right, video on the left, video below, video above), you will be able to decide whether to display a title. Maximum length is 255 characters.

Message

For the first four layouts (video on the right, video on the left, video below, video above), the message is mandatory. The text area must be filled in.

If you don't want to display a text, there are two options: use the "video only" layout or type a message in the text area, save the widget, and hide the element in editor.

85.gif

The text area supports multi-line messages. You can use HTML markup to add ordered or unordered lists, then create selectors such as <span>text</span> for specific styling. All the other styling aspects should be carried out through the "Style" tab section.

Select widget link type

You can now decide whether your widget will contain a clickable button (to close or redirect) or no link at all.

If you pick:

  • "The button is a link": you will need to specify a button URL and a button text. The widget will display a button.
  • "A click on the button closes the widget": you will need to specify a button text. The widget will display a button.
  • "None": the widget will not be clickable.

Unlike the Simple Pop-in and Image Pop-in widgets, the Video Pop-in widget includes a video but cannot be entirely clickable.

Second CTA/link option

86.png

If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one. 

 

Style tab

Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.

Background can be set up with an image using the image-fitting policy

4 options are provided:

  • "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
  • "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
  • "Fill": the image is resized to fill the background container without keeping the aspect ratio
  • "None": the image is left unchanged.

Video Pop-in widget Styling Specificities

Align text & button

In the "Text" collapsible group, in the "Style" tab, defining the alignment will impact both message and button.

87.gif

Rounded Corners

If you use very rounded corners (and very little padding), it will "crop" the video's corners.

 

Conditions tab

Select the Triggering and Recurrence options you want to apply to the Video Pop-in widget. 

Was this article helpful?

/