How do I resize an iframe? Follow
Our iframe element allows you to embed content onto your event page. This content can be resized by making a few quick edits to the embed code inside the element.
First, locate the iframe element's embed code.
Make sure you've already added an Iframe element to your event page.
- Locate the iframe element on your event page.
- Hover over the element and click the Iframe icon.
- Locate the iframe element in the layout tree on the right.
- Click Embed Options and then Edit Embed.
Next, manually resize the iframe element.
The width and height inside the embed code can be adjusted by changing the numbers between the quotation marks, shown below. The standard size of an iframe for desktop is a width of "560" and height of "315."
Warning: Editing width but not Height or vice versa will result in a very narrow vertical or horizontal view of your video, so be sure to update both accordingly!
What if I'm not sure what size iframe I should have?
Use 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.
- 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:
- Next, copy/paste this code and set it aside for now. You'll need it momentarily.
- Then, use the free iframe generator tool to create your desired iframe size element.
- After that, copy and paste the iframe generated code into your Splash iframe element.
- 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.
When these steps are complete you should see the new size reflected on page!
Watch how we added a our YouTube video into a new iframe below:
Please sign in to leave a comment.