Select Page

Help Center   ›   FAQs    ›  How to change Embed size on smartphones?

How to change Embed size on smartphones?

Written by Louis V.

Written by Louis V.

Updated over a week ago

 

The easiest way to have a good integration of your Soundsgood player on our website, is to use an iframe code with a width of 100%. This way, the player will automatically adjust to any screen size.

Example:

<iframe height=”450″ width=”100%” src=”https://play.soundsgood.co/embed/5b32862379519473200021cd?” frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen allow=”autoplay; encrypted-media” allowtransparency=”true”></iframe>

If you want to use a custom dimension (e.g. square) you can achieve a similar result by adding two players on your page, and managing their visibility with custom CSS rules. (If you have a wordpress website, you can often edit custom CSS in your theme settings. Ask your webmaster for help).

Example:

///// HTML

<div class=”deskContent”>

<iframe height=”450″ width=”450″ src=”https://play.soundsgood.co/embed/5b32862379519473200021cd?” frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen allow=”autoplay; encrypted-media” allowtransparency=”true”></iframe>

</div>

<div class=”phoneContent”>

<iframe height=”350″ width=”350″ src=”https://play.soundsgood.co/embed/5b32862379519473200021cd?” frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen allow=”autoplay; encrypted-media” allowtransparency=”true”></iframe>

</div>

/////  CSS

<style>

@media all and (min-width: 480px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}

@media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}

</style>