How do I resize an iframe?

Unlike adding YouTube or Vimeo media to your page via URL, adding media with our iframe element offers sizing flexibility. This is done by adjusting the width and height of the embed code.

Width and height can be adjusted by changing the numbers between the quotation marks of the iframe code, as shown below. Editing one but not the other will result in a very narrow vertical or horizontal view of your video, so be sure to update both accordingly!

iframe_customize_width_height_designer_pro.png

Pro Tip: Most iframes use a standard width="560" and height="315" for desktop. 

There are two ways to get started here after you've gone through the steps to add the iframe element to your page—clicking directly into the iframe or navigating through the layout tree.

To edit and resize the element via the event page:

1. Hover over the iframe element on your page.

2. Click on the iframe icon located at the top left.

3. Edit the width and height settings as desired.

4. Save. 

Screen_Recording_2019-12-21_at_05.27_AM.gif

To edit and resize your iframe from the layout tree:

1. Click into the iframe element in the column to the right of your event page.

2. Select the Embed Options dropdown and click Edit Embed.

3. Update the width and height as desired.

4. Save.

Screen_Recording_2019-12-21_at_01.40_AM.gif

Congrats, you're all set!

 

What if I'm not sure what size iframe I should have?

Check out a third party iframe generator tool to help determine what size iframe you'll want to use on your event page. Heads up! The following steps are more advanced, so be sure to reach out to your internal development team for assistance should you need it.

1. First, you'll need the iframe code from YouTube or Vimeo to copy one very small line, the iframe source code. Here's what that looks like:

custom_iframe_designer_pro.png

2. Next, copy/paste this code and set it aside for now. You'll need it momentarily.

3. Then, use the free iframe generator tool to create your desired iframe size element.

4. After that, copy and paste the iframe generated code into your Splash iframe element. 

5. Finally, keeping the iframe element window open, replace the source code (src="") with the code that was taken from the YouTube or Vimeo iframe code earlier. custom_iframe_replace_src_designer_pro.gif

6. When executed correctly, you should see your media at the new size.

Watch how we added a our YouTube video into a new iframe below:Screen_Recording_2020-01-04_at_12.26_AM.gif

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.