How do I make the embedded video or collection scale dynamically to the browser window (be responsive)?

By making your embed code dynamic, it allows the video or collection to change its size on the page to fit the available space and not extending outside the viewable area.

Some website building tools (such as Squarespace) will do this for you automatically, and others require manual code to achieve.

For those needing to code it manually, we have provided an example of a dynamic scaling embed code.

Original Embed Code

For reference, here is a sample of our standard embed code provided in the share link settings.

<iframe width='640' height='360' src='https://mediazilla.com/hnsm303P1?autoplay=0' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Dynamic Embed Code

Below is the modified embed code for the same video or collection that makes it scale dynamically. This code will make it fill 100% width of the available space and be 16:9 aspect ratio.

Simply replace the share link in the code with your own. 

To change the aspect ratio for a standalone video, you would need to modify the "padding-bottom" in the embed code, currently set to 56.25%. Simply take the (height / width) x 100 to get the padding-bottom percentage.

<div style="position: relative;padding-bottom: 56.25%;padding-top: 0;height: 0;">
 <iframe style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" src='https://mediazilla.com/hnsm303P1?autoplay=0' frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>