Menu icon Foundation
How to size a reveal modal to the same as video it contains

Title basically says it all. Trying to create a reveal modal for a video and I would like to control the size of the modal based on the size of the video it contains, is that possible, how to do it? Im using basic html 5 video tag and setting the height/width properties.

modal

Title basically says it all. Trying to create a reveal modal for a video and I would like to control the size of the modal based on the size of the video it contains, is that possible, how to do it? Im using basic html 5 video tag and setting the height/width properties.

Rafi Benkual about 5 years ago

If you used flex-video or any iframe you can specify the video size

<iframe width="1280" height="720" src="http://www.youtube-nocookie.com/embed/wnXCopXXblE?rel=0" frameborder="0" allowfullscreen="" data-src="http://www.youtube-nocookie.com/embed/wnXCopXXblE?rel=0"></iframe>

If you need more help, post your site link so we can see.

Ryan Hellerud about 5 years ago

Forgot to mention the video is stored on my computer as an mp4 so im not sure iframe would work? Also I can size the video with html 5 video tag but it does not fit in the modal and does not look correct because the modal background is too big or small. I don't have it on live site yet but does that help?
```HTML
Click Me For A Modal

    <div id="myModal" class="reveal-modal small" data-reveal>
        <video width="560" height="420" controls>Apex Online Registration
            <source src="/Videos/ApexOnlineRegistration.mp4" type="video/mp4">
        </video> 
        <a class="close-reveal-modal">&#215;</a>
    </div>