S3Bubble Documentation

  • We work on our documentation daily if you feel we are missing anything please contact us

DEMO: Custom Playlist Views

This is an example of a video playlist that can be completely customized.

Video One

Click the thumbnail to change videos the click event can be added to any element not just the thumbnail.

Video Two

Click the thumbnail to change videos the click event can be added to any element not just the thumbnail.

Video Three

Click the thumbnail to change videos the click event can be added to any element not just the thumbnail.

!Important Include scripts
<!-- INCLUDE THE CSS IN THE HEAD OF YOUR DOCUMENT -->
<link rel='stylesheet' href='https://unpkg.com/s3bubble-javascript/s3bubble.min.css' type='text/css' media='all' /> <!-- INCLUDE THE JAVASCRIPT IN THE FOOTER OF YOUR DOCUMENT -->
<script src="https://unpkg.com/s3bubble-javascript/s3bubble.min.js"></script>
Just add the class and setup code
<div class="s3bubble s3bubbble-prepare-16-9" id="plist" data-setup='{"codes":["qPtj41773"],"options":{"muted":true},"brand":{"theme":"boxed"}}'></div>
<div class="media"> 
 <div class="media-left"> 
   <a href="#" class="s3bubble-list" href="#" data-setup='{"codes":["Hddq62614"],"listContainerId":"plist"}'> <img alt="64x64" class="media-object" src="https://via.placeholder.com/64x64" style="width: 64px; height: 64px;"></a> 
 </div> 
<div class="media-body"><h4 class="media-heading">Video One</h4> Click the thumbnail to change videos the click event can be added to any element not just the thumbnail.
</div> 
</div>
<div class="media"> 
 <div class="media-left"> 
   <a href="#" class="s3bubble-list" href="#" data-setup='{"codes":["meNb61721"],"listContainerId":"plist"}'> <img alt="64x64" class="media-object" src="https://via.placeholder.com/64x64" style="width: 64px; height: 64px;"></a> 
 </div> 
<div class="media-body"><h4 class="media-heading">Video Two</h4> Click the thumbnail to change videos the click event can be added to any element not just the thumbnail.
</div> 
</div>
<div class="media"> 
 <div class="media-left"> 
   <a href="#" class="s3bubble-list" href="#" data-setup='{"codes":["zggp60850"],"listContainerId":"plist"}'> <img alt="64x64" class="media-object" src="https://via.placeholder.com/64x64" style="width: 64px; height: 64px;"></a> 
 </div> 
<div class="media-body"><h4 class="media-heading">Video Three</h4> Click the thumbnail to change videos the click event can be added to any element not just the thumbnail.
</div> 
</div>

Power Streaming

We distribute millions of videos via our service every month

Sign Up