You can insert a video anywhere you have a text field that support HTML. Look for the small HTML badge in the lower right corner...
Upload your video to a video service that support embedding your video on another page, e.g. YouTube or Vimeo.
You can either use our smart video insertion, that provides a few extra options, or the video services own embed code.
Smart video insert
With our smart video insert code you get extra options for YouTube, Vimeo or self hosted MP4 videos with a simpler embed code:
- Stop the subscriber from fast forwarding through the video (optional)
- Show challenges only after having viewed the video to the end (optional)
- Make the video auto play (if muted) (optional)
- The video is automatically scaled to fit the area it is inserted into
This is the HTML code that should be inserted in a HTML compatible field (look for the small HTML badge in the lower right corner) on any page except for emails:
<div data-videoprovider="youtube" data-videoid="tPEE9ZwTmy0" class="container-16x9 video" controls></div>
Some of the fields can be excluded or use a different value, depending on how you wish the video should be presented or what should happen:
- videoprovider="youtube" is the service used for hosting the video. It can be either "vimeo", "youtube" or a self hosted "mp4".
- videoid="tPEE9ZwTmy0" is the ID of the video used either on YouTube or Vimeo, or in the case of a self hosted MP4, it is the entire URL of the video (i.e. "https://yourdomain.com/video.mp4").
For YouTube and Vimeo you can find the ID at the end of the URL of the page with the video or you can copy the video ID from the share window:
The example YouTube video ID in the screenshot is: dQw4w9WgXcQ
- "controls" is wether the player should show controls for seeking or pausing the video. Remove it to hide the player controls.
- "container-16x9" is the aspect ratio of the video and the one used by 99% of all videos today. If you need a different aspect ratio, please contact us.
Smart video insert additional options
You can include several options in the HTML code. This is the entire HTML snippet if all options are enabled:
<div data-videoprovider="youtube" data-videoid="tPEE9ZwTmy0" class="container-16x9 on-end-show-challenge video" controls autoplay noseek mute loop></div>
You can include or leave out some of the options by deleting keywords from the above HTML snippet:
- "on-end-show-challenge" should only be used on the "Challenge" page in the introduction text. If provided, the challenges are hidden until the video has been viewed to the end. This can be used in conjunction with adding the following HTML snippet to the same text field.
<div class="on-show-challenge-hide">When you've watched the entire video you'll see the challenges below</div>
It will hide the text once the entire video has been viewed. This option doesn't work with the "loop" option enabled. See below for more information. - "autoplay" is wether the video should start playing immediately without user interaction. Autoplay only works with muted videos. Remove it to make the subscriber start the video.
- "noseek" determines wether the video can be fast forwarded or not. If left out the subscriber can fast forward to the end, without watching the entire video.
- "controls" is wether the player should show controls for seeking or pausing the video. Remove it to hide controls.
- "mute" is wether the video should be muted as default. Remove it to leave sound on.
- "loop" is wether the video should loop once viewed to the end. Remove it to just stop the video after viewed to the end.
Showing challenges only after viewing video to the end
If you have a video which your subscribers has to view to the end it might be difficult for them to know what to do before it has ended.
This can be made easier by combining the Smart video insert above with a bit of HTML that is only shown before the video has finished playing. It is great for giving the subscriber a hint of what is about to happen.
Just insert the following HTML snippet into the introduction text HTML field on the Challenge page.
<div class="on-show-challenge-hide">When you've watched the entire video you'll see the challenges below</div>
Once the video has been viewed to the end, this text will be hidden. This option doesn't work with the "loop" option enabled on the Smart video insert.
You can change the wording of the text, but make sure it starts with <div class="on-show-challenge-hide"> and ends with </div>. If the page looks wrong in preview, it is probably because you missed a " or the </div>.
This snippet is often used in conjunction with the "on-end-show-challenge" option on the Smart video insert described above.
Video services custom embed code
For other services than YouTube, like Vimeo, you should replace the entire Url in the src-parameter below. For YouTube you only need to change the video id.
Copy the video id from the URL or the share window:
The YouTube video id looks like this: dQw4w9WgXcQ
Copy the embed code below and insert it in a HTML text field in your campaign:
<div class="video show-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
Insert your own video id in the source-tag:
Save the page and you are done 👍🏻
0 Comments