Preface:  We’ll use some Custom CSS code in the “Look and Feel” section of the survey.  By modifying the embed code we retrieve from Kaltura and wrapping it with another small block of code, this will make sure that videos look the best they can and scale properly regardless of the device/screen size it’s being viewed on.

Qualtrics Look and Feel

1. Click on the Look and Feel menu icon in the left sidebar of your survey, and then select Style.
   
2. Copy and paste the following code into the Custom CCS box.

   .kaltura_wrapper {
   	width:100%;
   	height:0;
   	padding-bottom:56.27%;
   	position:relative;
   }
   
   .kaltura_wrapper #kaltura_player {
   	position:absolute;
   	width:100%;
   	height:100%;
   	left:0;
   	top:0;
   	border:0;
       border-radius:8px;
   }

3. Click Apply in the lower right corner of the screen.  This only needs to be done once per survey.

Optimizing Kaltura Embed Code

After doing the above, repeat the steps below for each video you’d like to embed.  NOTE: It's recommended to put each video into its own Text/Graphic question set to Content type "text" rather than attempting to embed it directly into an actual response question.  This makes it easier to edit question formatting independently from this video embed code.

1. Click in the body of your question and switch to HTML view by clicking the blue box in the upper right.
   
2. Copy and Paste the following:

   <div class="kaltura_wrapper">KALTURA_EMBED_CODE_HERE</div>

3. Copy the embed code for your video by following these instructions: Kaltura - How to Get a Link or Embed Code to a Video in MediaSpace [UW-Madison].  It should look similar to the following:

   <iframe id="kaltura_player" src='https://cdnapisec.kaltura.com/p/1660902/embedPlaykitJs/uiconf_id/55063162?iframeembed=true&entry_id=1_7ayek3xn&config[provider]={"widgetId":"1_6xe3pn0j"}&config[playback]={"startTime":0}' style="width: 576px;height: 324px;border: 0;" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *" title="WCFTR Documentary - Scanning Film and TV History"></iframe>

4. Paste it into your question in place of KALTURA_EMBED_CODE_HERE.
5. Find and delete the style="..." section of the embed code you just pasted.  The resulting block should look similar to this:

   <div class="kaltura_wrapper"><iframe id="kaltura_player" src='https://cdnapisec.kaltura.com/p/1660902/embedPlaykitJs/uiconf_id/55063162?iframeembed=true&entry_id=1_7ayek3xn&config[provider]={"widgetId":"1_6xe3pn0j"}&config[playback]={"startTime":0}' allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *" title="WCFTR Documentary - Scanning Film and TV History"></iframe></div>

6. Preview the question to make sure it works as expected.