Embedded Youtube Video CSS | XM Community
Skip to main content

Hi,
I have 0 experience with HTML or any coding. I have embedded a Youtube video into my survey, the video itself is working perfectly fine. But I want to make the video responsive, so that it fits the screen of the participant whether they are on their desktop or any mobile. I have found how to do this by changing the CSS. But I don't understand how/where to add this CSS. I've 0 knowledge about coding.
This is the general HTML for the video
/>


Please watch this short film
This is the CSS for what I want:
.iframe-container{
 position: relative;
 width: 100%;
 padding-bottom: 56.25%; 
 height: 0;
}
.iframe-container iframe{
 position: absolute;
 top:0;
 left: 0;
 width: 100%;
 height: 100%;

Hi Kate,
I am glad I came across your post, because it made me check in on my templates that have implemented the CSS solution you are referring to. To my surprise, all my surveys that were using iframes had stopped displaying them! I played around with the CSS and I think it has something to do with the position: absolute in the child elements (iframe, container, embed) and I am not sure what has changed there because that was working just fine a couple weeks ago. Instead, I went with the solution proposed on w3schools.
https://www.w3schools.com/howto/howto_css_responsive_iframes.asp
Anyway, to your question: CSS can be applied over in the Style portion of your survey's Look & Feel. Try pasting the below code into the Custom CSS field:
.container { position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}


.responsive-iframe {
position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

Then, within the Survey Builder, place the below in the HTML view of a survey question. Adjust the video/website URL as needed.


 


Also attached is a QSF where this is working for me.
VideoWebsiteEmbeddingV2.qsf

Hi Tom, thank you so much. This worked straight away. Thank you so much

Leave a Reply


Terms & Conditions