How to Make your StreamSpot Player Responsive

NOTE: If your website itself is not set to be responsive than the player even with the changes below will not be responsive. If you require assistance making your website responsive please consult your web designer or webmaster. 

 

By default, StreamSpot players have a set width and height that are defined when you build your unique player. If you embed the player on a responsive website, the result may look like the example below: (the player is wider than the website after the page resizes, and this is not optimal)

Making your StreamSpot player responsive means that it will automatically "adapt" to the size of the container in which it's placed.  By just adding a few lines of code to your website's CSS (Cascading Style Sheet), you can make your player responsive. 

1. Ask your webmaster to add the following lines to your website's CSS code:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
} /* 16x9 Aspect Ratio */ .video-container-16x9 { padding-bottom: 56.25%; } /* 4x3 Aspect Ratio */ .video-container-4x3 { padding-bottom: 75%; } .video-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }

2. Simply place your StreamSpot embed code between the <div class="video-container"> tags for your newly created class. An example is below: 

<div class="video-container">
  <iframe width="640" height="360" src="https://player2.streamspot.com/?playerId=YOURPLAYERID" frameborder="0" allowfullscreen></iframe>
</div>

Now your StreamSpot player will automatically adjust to any screen size automatically.

To learn more about how the Player Embed Code works in StreamSpot, see the links to the other Knowledgebase articles below:

Have more questions? Submit a request

Comments