Adapt your player to be responsive on multiple screen sizes

If you want the 360player to be responsive and adapt to multiple screen sizes (from mobile to desktop), you are on the right article. Let's dig in.

The trick is this little piece of CSS:

<style>
    .iframe-container {
        background: #ccc;
        position: relative;
        height: 0;
        padding-bottom: 75%;  /* 4/3 on mobile, padding = 3/4 */
    }
    .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0; 
        width: 100%; 
        height: 100%;
    }

    @media all and (min-width: 24em) {
        .iframe-container {
            padding-bottom: 56.25%;  /* 16/9 on desktop, padding = 9/16 */
        }
    }
</style>

Once you've included this styles into your html page (or into your main stylesheet), you can now use the following code to embed the player:

<div class="iframe-container">
    <iframe src="https://360player.io/p/k6f7rb/" frameborder="0" allowfullscreen></iframe>
</div>

NB: remember to change the src property to point to your own player url.

You can find the following example on github.

If you have any questions, don't hesitate to contact us.