Static Element: Video Template

This article will show you how to embed a video in your survey. 

See the following articles if you have not already:

• Uploading Images/Videos
• Add a Question: Static Elements

Add a Video

Follow the steps below to add a video:

1. Program a Static Element
   • See article: 
   • Standard Question: Static Elements
2. Go to the 'Default Text' Card
   1. Click on 'Survey Settings' on the left
   2. Click on 'Default Text' 
   3. Click on the edit icon tied to the 'Survey Header' 
      
   4. Access the 'Source Code Editor' 
      • See article: Source Code Editor
      • Add the following code

      <script src="https://cdn2.cmix.com/surveyContent/thirdparty/jwplayer7_4_3/jwplayer.js"></script>
      		

   5. Click on the source icon (</>) to close the code view 
      
   6. Once you are out of the code view, click 'SAVE' 
      
   7. You can now close the 'Default Text' Card
3. Open your Static Element
   1. Click on 'ADD JAVASCRIPT' and add the following code below updating the options as needed. Areas to be updated have notes between the /* */ 
      1. Set your Next Page default
      2. Update your Video URL in the playlist. This is defaulted to show only one but you can add more videos to the playlist by making a comma delimited list of files. 
         • Example: One video:
           { file: "https://videocheck.mp4"}
         • Example: More than one video:
           { file: "https://videocheck1.mp4"},
           { file: "https://videocheck2.mp4"}
      3. Modify the height, if needed
      4. Modify the width, if needed
      5. Do you want to auto start the video when the page loads
         • NOTE: If you are allowing mobile devices to take the survey you cannot use autostart
      6. Do you want to show the controls (play, pause, stop buttons) 
      7. Do you want to mute the volume
      8. Set your Next Page settings after the playlist is done. Default is to disable the Next Page button until the video is done playing.

         jwplayer.key="1b0vOLEKH9o78NHDYrVu8zqwA3ydA9hiZBqy85asUdQ=";
         
         /*NEXT PAGE - DEFAULT*/  
           /*a*/ cmSurvey.disableNextButton(true); /* Use 'true'to disable OR 'false' to enable */
         
         /*PLAYLIST SETTINGS*/
         jwplayer("cmix-video").setup({ 
           /*b*/ /*if you have more than one video use this pattern: [{ file: "https://video1.mp4"}, { file: "https://video1.mp4"}, { file: "https://video1.mp4"}],*/ 
         	playlist: [
         		{ file: "https://cdn2.cmix.com/surveyContent/client_13335/uploads/videocheck.mp4"}
                 ], 
           /*c*/ height: 300,
           /*d*/ width: 480,
           /*e*/ autostart: false, /* use 'true' or 'false' */
           /*f*/ controls: true, /* use 'true' or 'false' */
           /*g*/ mute: false /* use 'true' or 'false' */
         });
         
         /*NEXT PAGE - WHEN PLAYLIST IS DONE*/
         jwplayer("cmix-video").onPlaylistComplete(function(){ 
           /*h*/ cmSurvey.disableNextButton(false); /* NEXT PAGE when playlist is done. Use 'true' to enable OR 'false' to disable*/
         });
         
         /*ALLOWS PLAY BUTTON ON MOBILE AND HIDES CONTROL BAR*/
         jwplayer("cmix-video").onPlay(function(){
           jQuery(".jw-controlbar").css("visibility" , "hidden");
         });
         			

      9. Click on 'SAVE' when you are done
   2. Click on the 'ADD CSS' 
      1. button and add the following code. 
         

          #cmix-video {
           margin: 0 auto;
         }
         /* UPDATED INFO FOR VIDEO WIDTH */ 
         video.jw-video {
           transform: none !important;
           width: 100% !important;
           height: 100% !important;
           top: 0% !important;
           left: 0% !important;
         }
         			

      2. Click on 'SAVE' when you are done
   3. Click on the HTML Editor icon of your Static Element. This is normally where the text goes. 
      
   4. Click on the source (</>) 
      
   5. Add the following code into the source (</>)
      

      <div id="cmix-video">video will show here</div>
      		

   6. Click on the source (</>) to close the code view
      
   7. Click on 'SAVE' when you are done
      
   8. Close the Static Element Card
4. You are all done. Make sure to test to confirm everything is working as intended