Video within a modal content area

[mtscottcog]

On this page ( https://transconnex.net/speaking/ ) on the last 3 button at the bottom, within modal content areas I have text and then below that, an iframed vimeo video in a div. How do I change the width/height with the viewport size? Looks like I need two breakpoints to keep the video from extending beyond the modal window size. Have tried to work with @media, but haven’t found the solution so far.

[nabeel]

Hi @mtscottcog,

Thank you for reaching out to us. You can control the width and height of iframe video with width and height attribute:

<iframe src="https://player.vimeo.com/video/318639337" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

You can resize it on different breakpoints with media queries but first give your iframe a class e.g iframe-video:

<iframe class="iframe-video" src="https://player.vimeo.com/video/318639337" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

Now you can use this class to resize the video on different breakpoints with CSS media queries:

@media screen and (max-width: 767px) {
    .iframe-video {
        width: 600px;
        height: 400px;
    }
}

@media screen and (max-width: 480px) {
    .iframe-video {
        width: 380px;
        height: 200px;
    }
}

You can change the breakpoints and values as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Hope this helps!

[mtscottcog]

Yes. Perfect solution. Thanks for the guidance.

[ruenel]

You are most welcome!