Making issuu Embeds Responsive

When creating an embed using the embed widget accessed from your Publisher Tools page, the pixel height and width are predefined by default. You can resize the embed by selecting a new width, and the height will automatically be adjusted based on the aspect ratio of your publication.

For embedding issuu documents where they resize dynamically with the screen size (responsive websites), select the “responsive width” option in the embed widget.

 

You can also use CSS yourself to control the embed’s dimensions. To do so, you will need to change the style attribute of your embed code: i.e. style="width:100%; height:600px;”.

 

As a more advanced approach, you can add additional style sheets. Here are are two interesting options for using CSS to make your embeds responsive:

1) Use the vh (percent of view height) or vw (percent of view width) units. 

For example, set style="width:100%; height:50vw”. This will set the height of your embed to be half of the width of the browser window. See how it works.

 

2) Use a wrapper container with the iframe code.

This will give you a responsive embed with preserved aspect ratio. Here is an example of how that code may look (see how it works):

<script async src="//jsfiddle.net/k23jr7xb/embed/html,css,result/"></script>

 

<style>

.issuu-embed-container {

  position: relative;

  padding-bottom: 56.25%; /* set the aspect ratio here as (height / width) * 100% */

  height: 0;

  overflow: hidden;

  max-width: 100%;

}

.issuu-embed-container iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

</style>

<div class='issuu-embed-container'>

  <iframe src='//e.issuu.com/embed.html#<YOUR CODE>' frameborder='0' allowfullscreen></iframe>

</div>


Note that these are just a couple of suggested ways to use CSS to make your embeds responsive. There are many other options available.

Comments

Have more questions? Submit a request