There are 2 main ways of embedding external content on page. One is using the Video/Audio part, the other is using iFrames. 


TABLE OF CONTENTS


Video or audio content from Youtube, Vimeo, Spotify or Soundcloud


This works similarly for Productions (using the "Secondary video/audio URL" field) as it would for Stories (using the Video/Audio part).


For example, content from Spotify could look like this on your website: 

Our Video/Audio part has optimised solutions for embedding content from Youtube, Vimeo, Spotify and Soundcloud. All you need is the URL of the video, music or podcast you want to embed.


In most cases you can simply copy the URL from the address bar of your browser:


If you're viewing the content in an app, for instance Spotify, look for the "Share URL" or "Link" (it might have a different name depending on the app):



Other content using iFrames


Other content not supported by the Video/Audio part, can be embedded using iFrames. This allows you to insert almost any other webpage into your website. Take for instance Google Maps, or services that allow you to embed a PDF document. Depending on the type of service you want to embed, this can get a bit technical!


In Stories you can use the iFrame part, as in the screenshot below. In Productions you can use the iFrame fields.



In the "Page URL" or "iFrame URL" you insert the embed URL of that service. This screenshot highlights the URL for a Google Maps embed code. Here you need to take the "src" attribute of the HTML code they provide:



iFrame layout options

There are various layout options for your iFrame:

  • The padding (space above and below the iframe) can be changed (pTop and pBottom, in pixels).
  • A custom background colour can be set.
  • The width of the embedded HTML can be set to a percentage of the total (boxed- or fullwidth) area. 
  • The height of the embedded HTML can be set in pixels.


iFrame URLs: what works and what doesn't?

Use the embed URL provided by the service you want to embed. Not all URLs are suitable for iFrames. The website you're trying to embed needs to make their content available to embed in an iFrame. Services usually have both a shareable link, as we're using in the Video/Audio part, and an embed code. For use with iFrames, typically that link will not work and you'll need the "src" URL from the embed code. Have a look at the the example from Google Map, or this screenshot from Youtube:




The content from third parties like Youtube almost always come with their own cookies. Some of them might be functional, but they almost always come with some form of tracking. If the visitor of your website did not allow cookies beyond the functional ones required for using the website, we need to ask for permission first. To do so, instead of displaying the embedded content we present the visitor with a call to action to accept cookies:



Keywords: Iframe i Frame spotify podcast youtube vimeo video soundcloud embed embedded show content third party content