If you have a WordPress website or any platform where you can enter HTML code, you can embed a responsive interactive video with Near-Life…
Please note: this technique only works if you are using the block editor on WordPress or using HTML blocks or widgets. If you are using the Classic Editor, you will need to paste the regular embed code into your page or post using the ‘Text’ tab but the video will not be fully responsive.
It’s easy to embed a Near-Life interactive video into your website in a way that is fully responsive. This means it will automatically resize the interactive video to fill the space on a browser window whether it is large, small, desktop or mobile without the viewer having to change anything.
Here’s an example where the interactive video below will automatically resize if you change the size of the browser you are reading this on.
How to embed an interactive video responsively
In order to embed a Near-Life video onto your website responsively, you will need to add some special code to the page or post. This is just like embedding a video hosted on YouTube or Vimeo. The normal way one element that is hosted elsewhere is embedded into a WordPress is by using something called an iFrame. You don’t need to understand iFrames to do this, but you can read more about them here (link to WP beginner website).
The default embed code you get when you want to embed a Near-Life video onto your website looks like this:
<iframe width="560" height="315"
src="https://near-life.io/embed/t/2/p/2/s/2/g/2"
frameborder="0" allow="autoplay" allowfullscreen>
</iframe>
You can embed this on your website (using an HMTL block or widget) or, if using the Classic Editor on WordPress, you can paste it directly into a page or post using the ‘Text’ (as opposed to ‘Visual’) editing tab.
However, because of limitations with iFrame, this code is NOT responsive and sets a standard height and width for the interactive video (which you can change if you wish).
To make the interactive video responsive, you need to use different code, which you can copy below, and then edit the link to your interactive video back into.
This is the code you need to copy:
<style>
.video-responsive { padding-bottom: 56.25%; position: relative; height: 0; overflow: hidden; max-width: 100%; }
.video-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="video-responsive">
<iframe src="https://near-life.io/embed/t/237/p/468/s/686/g/686" frameborder="0" scrolling="no" allowfullscreen allow="autoplay; fullscreen"></iframe>
</div>
</br>
Then you need to change the link, that’s the bit shown in yellow highlighter below, to the link on your own Near-Life video (which you can get from the standard embed code)
Adding the responsive embed code to your site
Once you have the code ready with the link to your Near-Life interactive video, you can just paste it into the page or post on your WordPress site where you want it to appear using an html block or widget.
To see how I added the responsive video above to this blog post, please watch the screen recording below.
Video – how I added a responsive interactive video to this page
Reminder: here’s the responsive embed code to copy, paste and edit with your link
<style>
.video-responsive { padding-bottom: 56.25%; position: relative; height: 0; overflow: hidden; max-width: 100%; }
.video-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="video-responsive">
<iframe src="https://near-life.io/embed/t/237/p/468/s/686/g/686" frameborder="0" scrolling="no" allowfullscreen allow="autoplay; fullscreen"></iframe>
</div>
</br>
Need more help with interactive video?
If you need any more help embedding Near-Life interactive content onto your platform, just send us a message at info@near-life.tech