S3Bubble Official Documentation

  • We work on our documentation daily if you feel we are missing anything please let us know support@s3bubble.com

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>

Live Examples

Over 4 million videos delivered every month
via Amazon Web Services!

Scalable Media Delivery

Start 10 day free trial