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 a .mp4 file (works with .ogg and .webm too) hosted on your server.
This widget can be used if you want to catch your visitors attention on a specific content, if you want to display videos in a dynamic way or if want to display a fullscreen interstitial.
Obviously, you can imagine other use cases. You will see in the "Conditions" tab that you can use different triggers or recurrence parameters. Mixing the layout, the content and the conditions, the widget can help you reach your conversion goals.
Layout tab
Select a layout
We offer 5 different layouts: 4 with text (video on the right, video on the left, video below, video above) and 1 without text (video only). By default, the "video only" layout contains a button, but you can remove it.
Video over text ratio
For the "video on the left" and "video on the right" layouts, you can decide the video over text ratio. By sliding the cursor on the axis, you can decide if the video is going to take from 20 to 80% of the available width inside the widget container.
Widget dimensions based on content
By default, the "Widget dimensions based on content" toggler is toggled. It helps you not to worry about modals dimensions. Your pop-in will adapt accordingly based on the video (and text) dimensions.
But, for many of our users, this default dimensions management was not enough. So we came up with something trickier but more flexible. If you untoggle this toggler, you will be able to define both width and height of the pop-in. And, last but not least, you will able to define them (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)
Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another. Some of you may think that being able to define height in vw or width in vh doesn't make sense and that it is a bug or an oblivion on our side's but it is not. It can be useful to do, in some very edgy cases, that is for sure.
We voluntarily did not offer those units: cm, mm, in, pt, pc and ex as, in short, they are not best-practices. We are still open to discussion for implementing rem unit.
If you're digging the dimensional units in CSS, we strongly advise you read this W3C article which is a good starting point.
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 in relation with the video dimensions and the video over text ration.
Know issue: the widget configuration form not overlapping the website
In the past, we've chosen to make the widget configuration form not overlapping the website, especially if you want to position a widget in a corner or on the left side. Therefore the global website width is "squeezed" in the editor. Now, once you're 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. And results can be surprising...
We understand that defining the pop-in size without seeing the full rendering of the page is tricky. Until now, we haven't find a better solution to help you do that. Make sure, when you dimension your pop-in that it will adapt to all windows widths by showing/hiding the widget form or let the "Widget dimensions based on content" toggle toggled.
Content tab
Video URL
As this widget is a video pop-in, the first thing you will be asked to do is to paste the video URL.
The widget supports video URLs from:
- Youtube
- Vimeo
- Dailymotion
- 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)).
Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. In some browsers (e.g. Chrome >= 70.0) autoplay doesn’t work if not muted. So, we advise you to mute video if you run them in autoplay.
Youtube
The advanced parameters will be :
- Autoplay (toggled by default)
- Mute (toggled by default)
- Loop (toggled by default)
- Start after x seconds from the beginning (default is 0 sec.)
- End at 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 fullscreen (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 a subtitle-less video will have no impact.
Vimeo
The advanced parameters will be :
- Autoplay (toggled by default)
- Mute (toggled by default)
- Loop (toggled by default)
- Start after 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 didn't define it. In that case, you cannot override it. On our side, we cannot detect if the player color is already set so we will display the color picker in any case 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 that case, the widget will display a default HTML5 video player (renderings may differ from one browser to another). By the way, the widget also support .OGG and .WEBM.
The advanced parameters will be :
- Autoplay (toggled by default)
- Mute (toggled by default)
- Loop (toggled by default)
- Display controls (untoggled by default)
Title
For the first four layouts (video on the right, video on the left, video below, video above), you will be able to decide to display a title or not. Max. 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. You have to fill the textarea in.
If you don't want to display a text, you have to 2 alternatives options: use the "video only" layout or type a message in the textarea, save the widget and then, hide the element in editor.
The textarea supports multi-lines messages. You can use HTML markup to add ordered or unordered lists, the create selectors such as <span>text</span> for specific styling. All the other styling aspects should be done through the "Style tab".
Select widget link type
You can now decide if your pop-in will contain a clickable button (to close or redirect), if the pop-in will be entirely clickable (to close or redirect) or will have no link at all.
- If you pick "The button is a link", you will have to precise a button URL and a button text. The widget will display a button.
- If you pick "A click on the button closes the widget", you will have to precise a button text. The widget will display a button.
- If you pick, "None", well, nothing else is required. The widget will not be clickable.
Contrarily to the Simple Pop-in and Image Pop-in widgets, the Video Pop-in widget has it includes a video, cannot be entirely clickable.
Style tab
In the style tab, you will be able to define the size, color, border, background... of each element of the video pop-in. Uncollapse each group and adapt the widget to your website color palette and style.
By default, the pop-in inherits from the font-face of your website. But you can override it with the 1,000 Google Fonts available.
Refer to the "Style" tab article for more information on all available Style options.
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.
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 this widget.
Refer to the "Condition" tab article for details.
Comments
0 comments
Article is closed for comments.