The Session Media module can display embedded content from external sources like audio, video, or even entire websites. This is achieved using a web standard called iFrames. If you’re embedding a YouTube or SoundCloud link, for instance, using their share function will give you exactly the iFrame code you need, and you can just copy-paste it into the Embed field in the Session creation wizard. Sometimes, though, you may need to write the iFrame tag yourself.
This article will go into the details of how to write the code, as well as note a couple of common “gotchas” to watch out for. We'll do this with an iFrame tag, but also note that this can be done with an code (functionally similar, but iFrames are better practice, and we recommend them whenever possible).
How to Build a Basic iFrame Tag
- iFrame tags look like this: . This tells your browser that you're embedding a different webpage within the current one. NOTE: only the two bracketed portions are the tag; the period is not included in the code.
- Of course, you'll need actual content to embed! This is where "src" comes in (short for "source"): ;. Note that we use the format src=”[your website]”. Make sure to include those quotes!
- You'll also want to set the size of the embedding box: . This can be whatever size you want, as long as the browser permits it. You can also set height and width as percentages instead, which will scale the embedded content to the space the browser has indicated (100% for both width and height is the recommended setting for iFrames in Session Media).
- You're done! It's coding, so it may take a little debugging, but these are the fundamental pieces to iFrame embedding.
- You can also use this iframe generator which will speed this process up for you.
Common Gotchas
- If the embedded content shows up completely blank, this is almost always because the URL of the site you're accessing starts with http rather than https, which means it's an insecure link that Chrome and Firefox block for security purposes. Safari will allow this, but it's still recommended that you stick to https sites for security.
- The other common cause of iframes not displaying is if the site you're trying to embed actually prevents iframes. This will look the same as the above issue (an empty frame). For those with some coding familiarity, your browser console will also show an error detailing that the site has set "X-Frame-Origin" to something that doesn't allow Kannu to display it.
- If the media you've embedded has a fullscreen button, that button will only work if you include "allowfullscreen" at the end of the tag, like so:
- Our session media embedders are not code injectors or HTML documents, but rather recognize standardized embed tags and implement them appropriately. This means only iFrame and embed tags will work. Any other tags, including