+ Reply to Thread
Results 1 to 3 of 3

Thread: Responsive video

  1. #1

    Responsive video

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

  2. #2
    Need to add styles to: style.css
    And try to add: '!important' after width and height.
    Example: width: 100%!important;
    Viktor,
    Flynax technical department,
    Best wishes.

  3. #3
    Unfortunately that didn't work. Any other suggestions please ? Thanks.

+ Reply to Thread