Solved

Embedded Youtube Video CSS

Forum|Forum|3 years ago
March 23, 2022
2 replies
1265 views

Kate_

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
src="youtubelink<a href="https://www.youtube.com/embed/7H3oeTfYgkc?autoplay."">"</a><br>title="YouTube video player" width="560">/>

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%;

Best answer by Tom_1842

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

+28

Tom_1842
Level 8 ●●●●●●●●
Answer
Forum|Forum|3 years ago
March 23, 2022

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.