Embedding interactive media using an iframe element (Designer Pro)

Embeddable media makes your event page more fun and interactive, empowering you to maximize pre-, during-, and post-event engagement. 

Splash's iframe element makes adding any embeddable medium to your event page quick and seamless — not to mention, you're able to easily customize the width and height of the content.

Alright, let's dive in!

What's an iframe element best used for?

So many things, including:

  • Videos
  • Livestream (including Facebook Live!)

Screen_Recording_2017-03-22_at_02.48_PM.gif

  • Slide decks
  • Playlists

Screen_Recording_2017-03-22_at_03.10_PM.gif

  • Song players
  • Any media on the web that can produce an iframe code! (A whole world of possibilities). 

How do you add an iframe element to a page?

The good news is that adding an iframe element to a page is just as simple as adding any other element to your page!

1. From the Layout tab, navigate into the block you'd like to add the element to.

2. Click the + button in the bottom left hand corner.

3. Search for "iframe" in the element library that appears and click Add to Page.

4. You'll then be prompted to input the embed code.

5. Hit Save to see the media embedded into your page!

Screen_Recording_2017-03-22_at_03.34_PM.gif

How do I find the embed code of a piece of media?

Fear not, it's super easy to grab the embed code from any piece of media! More often than not, clicking on any sort of share action in the media's details will give you the normal URL, embed code, and more.

Check out an example from YouTube below:

Screen_Recording_2017-03-22_at_03.29_PM.gif

How do you customize the width and height of a piece of media?

This is one of the most beautiful parts of using the iframe element. Keep in mind that while we do offer other ways of adding videos to your pages (see here) none are just as easily customizable as using the iframe element.

To customize the width and height:

1. Hover over the iframe element on your page.

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

3. Don't be intimidated by this code! Adjusting the width and height is as simple as swapping out the numbers between the quotation marks.

Voila! 

Screen_Recording_2017-03-22_at_03.42_PM.gif

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