Want your Adventr embed to take up the full width of your webpage, whether on mobile or desktop? Then make it "responsive" like this.


These days, most websites have "responsive" designs - meaning they expand or contract to fit any screen size, from a mobile phone to a widescreen desktop. Since standard embed codes have the size baked in, you need to add some extra code to ensure your Adventr embed will be responsive.


Here's how it works for a standard 16:9 widescreen project:


Step 1: Copy the embed code from Adventr


It will look something like this:

<iframe src="https://player.adventr.io/video?link=https%3A%2F%2Fd252srr1zuysk4.cloudfront.net%2Fclients%2F10%2F212%2Fpublished%2F10-all-of-me-09603854.data" width="640px" height="360px" frameborder="0" scrolling="no" allowfullscreen allow="autoplay; fullscreen"></iframe>

Step 2: Find and copy the full URL in the src="" part of the code


In the above example, the URL is:

https://player.adventr.io/video?link=https%3A%2F%2Fd252srr1zuysk4.cloudfront.net%2Fclients%2F10%2F212%2Fpublished%2F10-all-of-me-09603854.data

Step 3: Replace the src="" contents in this code:


Change "REPLACE" to the URL you copied from your embed code:

<style>
.responsive-video { padding-bottom: 56.25%; position: relative; height: 0; overflow: hidden; max-width: 100%; }
.responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="responsive-video">
  <iframe src="REPLACE" frameborder="0" scrolling="no" allowfullscreen allow="autoplay; fullscreen"></iframe>
</div>

Step 4: Copy the resulting code and paste it into your website's HTML or your CMS's HTML block


The final code will look like this:

<style>
.responsive-video { padding-bottom: 56.25%; position: relative; height: 0; overflow: hidden; max-width: 100%; }
.responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="responsive-video">
  <iframe src="https://player.adventr.io/video?link=https%3A%2F%2Fd252srr1zuysk4.cloudfront.net%2Fclients%2F10%2F212%2Fpublished%2F10-all-of-me-09603854.data" frameborder="0" scrolling="no" allowfullscreen allow="autoplay; fullscreen"></iframe>
</div>

But what if your project is not 16:9 widescreen?

The above example is designed to work for a 16:9 embed. If your embed is a different aspect ratio, you need to change the percentage in the first padding-bottom: 56.25% section. To calculate what value to put there, simply divide the height of your project by the width and multiply by 100. So if your project is vertical 9:16 the formula is: 

16 / 9 * 100 = 177.78%

So change the code above like this:

<style>
.responsive-video { padding-bottom: 177.78%; position: relative; height: 0; overflow: hidden; max-width: 100%; }
.responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="responsive-video">
  <iframe src="https://player.adventr.io/video?link=https%3A%2F%2Fd252srr1zuysk4.cloudfront.net%2Fclients%2F10%2F212%2Fpublished%2F10-all-of-me-09603854.data" frameborder="0" scrolling="no" allowfullscreen allow="autoplay; fullscreen"></iframe>
</div>

Here are some common percentages to use for different aspect ratios:

  • Widescreen 16:9 — 56.25%
  • Vertical 9:16 — 177.78%
  • Academy 4:3 — 75%
  • Square 1:1 — 100%
  • Scope 2.39:1 — 41.84%