In this article we will provide you with a short tutorial on how to embed video within your questionnaire.



Table of contents:


General

When you are creating your questionnaire, you have the option to add general information pages in between the questions. You can use these pages to explain certain parts of your questionnaire or share any type of information you want to your respondents. You can even embed videos!


By default, these information pages are empty. So how do you embed a video on this page? Luckily, we have already done most of the heavy lifting for you.


Open your questionnaire and click the Add page button (1) at the top of the questionnaire pages. A pop-up window will appear.



Give your new page a unique name by filling in the Page Name field (2). In our example we will name the page Video page.


Select Information as page type (3) and click the Add button (4).


A new page will be inserted into your questionnaire.



A new page will always be inserted at the end of your questionnaire, before the End page, Completed page and the Time elapsed page.


If you want to change the location of the Video page you can move it up or down by hovering the page and clicking the Up or Down buttons (5). Clicking the buttons will move the page one place up or down.



When the Video page is in the right location, click the Update button at the top right corner of your screen to save your questionnaire.


Download template

The next thing you need do is to download one of two available templates:


  • If you want to show a video file you have uploaded to the Media Library of your portal, you need to download the embedded-video-page template.
  • If you want to play a YouTube video, you need to download the embedded-youtube-video-page template.


For more information on how to work with templates, please read the How to implement html templates into your questionnaire article.


Add video from Media Library

In this chapter we will explain on how to add a video from the Media Library to your questionnaire. If you want to add a YouTube video, you can skip this chapter and go on to the next.


Open the embedded-video-page template file in a text editor. Scroll down until you see the following lines of code:


<!-- /// --- start of embedded video code --- \\\ -->

<div class="auto-resizable-iframe">
  <div>
	<video width="100%" controls autoplay loop muted>
	<source src="https://cdn2.hubspot.net/hubfs/2173196/website2018/video/The%20Future%20is%20Bright_lowres.mp4" type="video/mp4">

	<!-- Paste the link to your video in the Media Library in the source tag above. Don't forget to also change the type code if your video file isn't a mp4 -->

	Your browser does not support HTML video.
	</video>
  </div>
</div>

<!-- \\\ --- end of embedded video code --- /// -->


The next thing you need to do is upload your video to the Media Library so we can link to it in the template. There are three supported video formats you can use: MP4, WebM and OGG. Please note that OGG files are not supported by Safari browsers.


For more information on how to upload a file to your Media Library, please read the How to manage your Media Library article.


To be safe, you need to upload the video file to the Public folder of your Media Libary. After you have uploaded your video, click the copy icon in the Action column (6). Clicking this icon will copy a file link to the cache memory of your computer.


The copy icon looks like this.



Go back to the opened template in your editor and paste the URL in the source tag by selecting the sample URL in the code and using the Paste option when clicking with the right mouse button.


Do not forget to also change the type in the source tag if your video is not a mp4 file.


You also have some additional controls at your disposal to modify the way the video is played when the page is opened. All you need to do is add some attributes to the video tag:


  • autoplay
     Specifies that the video will start playing as soon as it is ready.
  • loop
     Specifies that the video will start over again, every time it is finished.
  • muted
     Specifies that the audio output of the video should be muted.


If you want to add multiple attributes you need to separate them with a space.


Your code will now look something like this:


<!-- /// --- start of embedded video code --- \\\ -->

<div class="auto-resizable-iframe">
<div>
<video width="100%" controls autoplay loop muted>
<source src="https://cys02weuportalprod.blob.core.windows.net/e3e304eb-8715-4cd3-8944-062bd43e12d9/MediaLibrary/Public/The_Future_is_Bright.mp4?sv=2019-07-07&sr=b&sig=9cOzfsoJGDL1hUkSM5RQpR%2FZizqbAH0My3gCC6V1b7U%3D&st=2021-09-23T11%3A25%3A46Z&se=2121-09-23T11%3A30%3A46Z&sp=r" type="video/mp4">

<!-- Paste the link to your video in the Media Library in the source tag above. Don't forget to also change the type code if your video file isn't a mp4 -->

Your browser does not support HTML video.
</video>
</div>
</div>

<!-- \\\ --- end of embedded video code --- /// -->


You can check your modifications by saving the template file and opening it in your web browser.


If you are happy with the result, you can copy the complete code of the template and paste it in the questionnaire page you created earlier. Make sure you have switched on the Show HTML/CSS Editor Tab in Page Settings (7) on the right-hand side of your questionnaire builder.


This function adds an additional tab to the editor view and lets you enter HTML/CSS code into the Information page. Select the tab and paste the code in the Information area (8).


Use the Preview button (9) to view the result.


When everything is to your liking, click the Update button to save your work. Don’t forget to publish your questionnaire if you are also finished with building you questionnaire. Always test your questionnaire before going live.



Add video from YouTube

Open the embedded-youtube-video-page template file in a text editor. Scroll down until you see the following lines of code:


<!--- /// --- start of embedded video code --- \\\ --->

<div class="auto-resizable-iframe">
<div>
<iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/5-35O0bTz1M"></iframe>
</div>
</div>

<!--- \\\ --- end of embedded video code --- /// --->


The only thing you need know when you want to embed a YouTube video is the video_id of the video.


Open YouTube and open the video you want to embed. Click the Share button (6) underneath the video. A pop-up window will appear where you can find the information you need. 


The last part of the URL (after the slash) is the video_id (7) we need. Select this part of the link and use Ctrl + C to copy.



Go back to the opened file in the text editor and select the video_id part of the sample video.


The URL has the following format:


https://www.youtube.com/embed/VIDEO_ID


Update the URL by using right mouse click and selecting Paste or using Ctrl + V.


We can control the way the YouTube video is played when the page is loaded. We can do this by adding attributes to the end of the YouTube video URL in the template code:

  • rel=0
     The first parameter which should always be added is rel=0. This ensures that no videos from other channels are shown after the video file has played. However, related videos from the same channel are shown.


To append player attributes to the URL you must add a question mark (?) to the end of the URL before you add the first attribute.


The URL should now look something like this:


<!--- /// --- start of embedded video code --- \\\ --->

<div class="auto-resizable-iframe">
<div>
<iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/5-35O0bTz1M?rel=0"></iframe>
</div>
</div>

<!--- \\\ --- end of embedded video code --- /// --->


If you want to add multiple attributes to the URL, you need to separate them with an ampersand (&).

  • autoplay=1
    Specifies that the video will start playing as soon as it is ready. Chrome browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
  • loop=1
    Specifies that the video will start over again, every time it is finished.
  • mute=1
    Specifies that the audio output of the video is muted.


After adding all the parameters your link should look something like this:


<!--- /// --- start of embedded video code --- \\\ --->

<div class="auto-resizable-iframe">
<div>
<iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/5-35O0bTz1M?rel=0&loop=1&mute=1"></iframe>
</div>
</div>

<!--- \\\ --- end of embedded video code --- /// --->


You can check your modifications by saving the template file and opening it in your web browser.


If you are happy with the result, you can copy the complete code of the template and paste it in the questionnaire page you created earlier. Make sure you have switched on the Show HTML/CSS Editor Tab in Page Settings (8) on the right-hand side of your questionnaire builder.


This function adds an additional tab to the editor view and lets you enter HTML/CSS code into the Information page. Select the tab and paste the code in the Information area (9).


Use the Preview button (10) to view the result.


When everything is to your liking, click the Update button to save your work. Don’t forget to publish your questionnaire if you are also finished with building you questionnaire. Always test your questionnaire before going live.