Creating a connected video asset through iFrames
June 22nd, 2020
Embedding iFrames into your Interactive Video
The defining benefit of interactive video is that you can connect your content to the rest of the web, all within a click for your viewer. Whether surfacing vital information, teaching a lesson, or asking a question, interactivity can turn a static video into a truly immersive experience that allows your viewer to take an immediate action.
One key way to instantly make your video more connected is by using iFrames to bring in content seamlessly from the web. WIREWAX’s iFrame tool inside the Overlay editor allows you to surface any URL-hosted content simply by copying and pasting in the web address.
Below we’ll outline some of the most popular use cases for including iFrame content within your video. Read through and then give it a try yourself!
Websites or custom HTML page
The iFrame tool inside the Overlay editor allows you to copy and paste a web address into the overlay editor and surface its content. You can resize the iFrame as it makes sense in your overlay. Bear in mind if the site you’re bringing in is responsive, it should behave exactly as it does in the browser depending what size you set it.
On the far-left hand side of the Overlay Editor, choose ‘Embed’ (the last option) and enter a URL to the right.
One important thing to note: many domain owners purposely restrict their content from being iFramed for security reasons. WIREWAX Studio can’t override this restriction. If you’re the domain owner, ask your web team to check the site’s x-frame-options HTTP response header to allow for iFraming. If you aren’t the domain owner, consider asking the owner for access to an unrestricted page.
If x-frame-options restrictions are blocking your website from being iFramed, consider having your development team create and host a custom HTML page that you have control over and can edit as you wish.
If you’ve built a custom HTML interactive infographic or generated one using a third-party tool like Ceros, you can iFrame it into an overlay using a URL for a seamless experience.
Inside the overlay editor, you can use the Maps tool to iFrame in a particular location on a map. We’re using the Google Maps API to allow you to search for a location and add a marker if you wish.
For a seamless lead-generation experience, consider embedding a form or email capture inside your overlay, allowing your viewer to easily input their information or give you feedback right from the video.
If you already have a form capture on your website or another custom HTML page, you can iFrame it into the overlay as described above.
There are plenty of third-party tools, like Typeform, that will help you generate a quick form capture and spit out a URL you can embed. We’ve verified Typeform allows its domain to be iframed, but if you’re not using their service, check with your third-party tool to make sure it also allows for this.
Here’s a related fun fact: you can use a mailto: or a tel: link within your overlay from a button or an image, to allow your viewer to send you an email or call a number right from the video. From a button or image, choose ‘clickthrough URL’ and input either a mailto: or a tel: link.
All these methods bring you closer to your viewing audience and make it easier for you to connect.
Survey, poll or other widgets
Use a third-party survey or polling tool, such as Typeform or SurveyMonkey, to insert a custom form directly into your video. You can embed a survey or poll into an overlay launched upon click (“Click to take the Survey!”) or you can utilize a time-triggered overlay to launch the survey or poll automatically at any point in the video (say, at the very end).
These third-party tools will allow you to export your survey or poll as a URL that can simply be copied and pasted into the iFrame embed tool. We’ve verified SurveyMonkey and Typeform both allow their domains to be iFramed, but if you’re not using either of those services, check with your third-party tool to make sure they also allow for this.
Other third-party tools across the web allow you to create all kinds of embeddable widgets for your video or website, like countdown clocks or social media feeds. If you can embed it into your website, chances are you can embed it inside your video, too.
PDF download or other domain-hosted content
A great use of an iFrame is to bring in a hosted PDF so that the viewer can preview and download your content. The PDF must be hosted on your domain in order to be served via iFrame; if you don’t have one or would prefer WIREWAX to host, ask your Account Manager.
By iFraming in a PDF, the viewer is able to download the PDF directly from the video without having to open it up in a new tab.
For those in the healthcare verticals, PDFs can play an important role in surfacing the required pharmaceutical ISI to meet legal standards within the video. A scrolling ISI could be placed in the video frame alongside the video as a permanent display, or it could open up upon hotspot click.
Much like you can bring in content from around the web using an iFrame, you can also bring videos into your overlay in the same way. Many video players, such as Youtube, Vimeo, Facebook – and of course WIREWAX -allow their videos to be embedded using an iFrame embed code.
For Youtube, Vimeo and WIREWAX videos, you can simply use the ‘video’ feature inside the Overlay editor and pop the URL of your video in there.
For other video players that generate an iFrame embed code, like Facebook, they should provide you with an option to copy their iFrame code. Note that you only need the part of the code that contains the iFrame URL to the video (usually starting with https). Paste the URL into the Embed feature in the overlay editor, and voila!
Written by Marissa Ke, Customer Success Director