Scaling the design along with the content of your event page is one of the most important things to consider throughout the design process.

When it comes to the scalability and sizing of media content across multiple devices and screen sizes, it's important to consider the differences between Video elements and iframe elements.

Let's start with the definitions...

Both Video and iframe elements can be inserted anywhere within your event page layout.

A Video element allows you to add media to your event page by pasting the HTML embed code or a YouTube or Vimeo URL link. You have the option to hide any video controls like pause, sound options, settings. etc. You also have the option to set the video to loop.

Video elements are more responsive and can be resized across devices like Phone and Tablet.

An iframe element, short for inline frame, is an HTML element that allows an external webpage to be embedded in an HTML document. There are no options to hide controls or loop iframes.

An iframe element must keep the same dimensions across Desktop, Phone and Tablet since the size is dependent upon where it's externally embedded.

Resizing video or iframe content can present challenges since the ratio of each must be maintained. For this reason we recommend using full-width blocks that allow the video or iframe to stretch across the entire width of the page rather than in 2-column layout formats. This structure will help prevent any unwanted negative space that may appear below the video or iframe since they don't have the ability to stretch to fit a frame the same way imagery can.