Unlike adding YouTube or Vimeo media to your page via URL, adding media with our iframe element offers flexibility in the size of your videos and is done by adjusting the width and height of the embed code.
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!
The width and height can be adjusted by changing the numbers between the quotation marks of the iframe code, as shown below.
Pro Tip: Most iframes use a standard width="560" and height="315" for desktop.
There are two ways to get started with resizing an iframe.
- Clicking directly into an existing iframe already on your event page.
- Using the layout tree.
Just make sure to add the iframe element to your page before getting started.
To edit and resize an iframe already on your 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.
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.
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:
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.
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: