Skip to main content
All CollectionsEvent Website DesignEmbedding / Adding Content
Embed Spotify, Advertisement Banners, and Games to Your Session Using the iFrame
Embed Spotify, Advertisement Banners, and Games to Your Session Using the iFrame

Use the iFrame to add Spotify, videos, games, etc to show right below your session video.

Ariane Ramirez avatar
Written by Ariane Ramirez
Updated over a year ago

While in a session, there's an area below the video that you can utilize for several purposes, like adding media players like Spotify, games, and banners for sponsor advertisements. The area below is an iFrame generally used for closed captioning and language interpretations.

However, if you're not adding closed captioning, you may want to use the iFrame feature to entertain your attendees or even promote your exhibitors and sponsors.

You need to copy the embed URL from an embed code and paste it to the iFrame field in your session details to use this feature. This article will teach you how to get that embed URL and have it appear and work in the session.

What you can embed

Add Spotify to Your Session

You may want to add a Spotify playlist that attendees can play while in the session. They can play it while waiting for the session to start. You can even add your podcast in there!

  • Open Spotify

  • Look for the playlist you want to embed

  • Click the 3 dot menu

  • Select Share

  • Select Embed Playlist

  • In the pop-up, click Show code

  • Click Copy

  • This will copy the entire code, but you only need a part of it. So paste that code somewhere to be able to copy what you need.

  • Copy only the part that starts with https:// up to the question mark ?

  • Paste it to the iFrame field in your session details

    In the example above, the whole code is this:

    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/37i9dQZF1DX1PfYnYcpw8w?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>

    What you will need is only this part from above:

    https://open.spotify.com/embed/playlist/37i9dQZF1DX1PfYnYcpw8w?

If you want to test this, go ahead and copy that link and paste it to the Iframe field in your session details. You can also adjust the height of the iFrame.

The player should appear right below the session video. It will only appear during the live session, as seen in the first image in this article.


​Note: Spotify will not autoplay and will only be visible when the session start time is reached. If the session goes over time, it will remain in place until the broadcast ends.

Add Advertisement Banners to Your Session

One way to attract more sponsors to your event is to give them more options on how they can display their logo and other marketing materials. You can use the iFrame as an ad space for your sponsors where a video will be looping during the session.

In the example below, we embedded an advertisement banner video that we uploaded on Vimeo. We made a few tweaks to the URL to ensure it plays on loop.

  • Upload your video to Vimeo

  • Click the video to see the other editing options

  • Click Embed. This will show you to entire code.

  • Copy only the part that starts with https:// up to the question mark ?

  • Add api=1&background=1&mute=0 to the end of that URL

  • Paste it to the iFrame field in your session details

    In the example above, the whole code is this:

    <div style="padding:15% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/711921746?h=8fe4c9cf78&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Outro Accelevents"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

    What you will need is only this part from above:

    https://player.vimeo.com/video/711921746?

    And then, you'll need to add the code below to the end of the URL above:

    api=1&background=1&mute=0

    This is what your URL should look like:

    https://player.vimeo.com/video/711921746?api=1&background=1&mute=0

If you want to test this, go ahead and copy that link and paste it to the Iframe field in your session details. You can also adjust the height of the iFrame.

The Vimeo video should appear right below the session video. It will only appear during the live session, and it will play on loop without audio.

Note: This may not work on a free Vimeo account, as when you try to embed, the play button shows up, and it does not automatically play.

Add Games to Your Session

You can add fun and simple online games below the session video to keep your attendees entertained. In this example, we are adding Angry Birds through https://funhtml5games.com

  • Go to https://funhtml5games.com

  • Pick a game and open it

  • Copy the embed code right below the game

  • This will copy the entire code, but you only need a part of it. So paste that code somewhere to be able to copy what you need.

  • Copy only the part that starts with https:// up to the name of the game angrybirds

  • Paste it to the iFrame field in your session details

    In the example above, the whole code is this:

    <iframe src="https://funhtml5games.com?embed=angrybirds" style="width:1000px;height:600px;border:none;" frameborder="0" scrolling="no"></iframe>

    What you will need is only this part from above:

    https://funhtml5games.com?embed=angrybirds

If you want to test this, go ahead and copy that link and paste it to the iFrame field in your session details. You can also adjust the height of the iFrame.

The game should appear right below the session video. It will only appear during the live session.

Did this answer your question?