Hello, can anyone help please ?
I don't have my site live yet, but basically I created a static page (Nova template), and I have text which re-sizes responsively. I added a Youtube iframe and it remains large when viewing on a mobile device. Everywhere on the internet the advice is to wrap it in a container div, and add the css. (the css changes slightly but it's all generally the same). I can easily add the div to the page.....
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/KQXgvWmK_ms" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
But I have tried adding the css in each of the following locations: style.css common.ccc builder.css jquery.ui.css rlExt.css and ext-all.css and still the video doesn't change in size. I have since replaced each of the css files back to their original ones. Any ideas would be gratefully received. Thanks...
THE CSS.
.video-container {
overflow: hidden;
position: relative;
width:100%;
}
.video-container::after {
padding-top: 56.25%;
display: block;
content: '';
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}