Resizing Embeds To Be Responsive

There are several ways to successfully embed and customize your content on Issuu. 

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

For embedding Issuu publications, where they resize dynamically with the screen size (responsive websites), select the RESPONSIVE WIDTH option in the embed widget.

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

As an advanced approach, you can add additional style sheets. Here are two 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. See how it works. Here is an example of how that code may look -

 <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>

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