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

Distributing millions of videos
every month via Wordpress

S3Bubble is a SAAS platform for media streaming via Wordpress designed to help all your media streaming needs

Free Trial