Joshua Jordan

<p>Dependent Media Audio Playlist for Beaver Builder adds a self-contained audio playlist module to the Beaver Builder page editor. Drop it onto a page, paste in audio URLs (or pick files from your media library), and you get a full playlist player with play/pause, previous/next, shuffle, repeat, scrubbable progress, and a volume slider — all styleable from the standard Beaver Builder color and dimension settings.</p>
<p>This plugin is <strong>not affiliated with or endorsed by Beaver Builder</strong>. “Beaver Builder” is a trademark of Beaver Builder LLC and is used in this plugin’s name and description solely to describe what page builder this module integrates with.</p>
<h4>Features</h4>
<ul>
<li>Full playlist UI with track titles, artists, and optional artwork</li>
<li>Play, pause, previous, next, shuffle, repeat (off / repeat-all / repeat-one)</li>
<li>Scrubbable progress bar with current time and duration</li>
<li>Volume slider with configurable initial volume</li>
<li>Optional autoplay (browser-permitting)</li>
<li>Per-instance color customization: background, text, accent, progress bar, hover highlight</li>
<li>Border radius and max-width controls</li>
<li>Native HTML5 audio — no external libraries, no third-party services</li>
<li>Works with whatever audio formats the visitor’s browser supports (MP3, AAC, OGG, WAV)</li>
<li>Built-in media library picker buttons in the editor for both audio files and artwork</li>
</ul>
<h4>You bring your own audio</h4>
<p>Tracks are stored in your WordPress Media Library (or any reachable URL). The plugin just references them and plays them in the browser. No data leaves the visitor’s device — there are no analytics, no telemetry, and no third-party scripts.</p>
<h4>Requires Beaver Builder</h4>
<p>This module requires the Beaver Builder page builder (Lite or Pro). The free <a href="https://wordpress.org/plugins/beaver-builder-lite-version/" rel="ugc">Beaver Builder Lite</a> version is sufficient. If Beaver Builder is not installed or activated, the module simply won’t appear in the editor and an admin notice will be shown.</p>


Dependent Media Audio Playlist for Beaver Builder

A Beaver Builder module: customizable audio playlist player with shuffle, repeat, artwork, volume, and full playback controls.

jsphstls

<p><a href="http://codepen.io/jsphstls/full/aOOqzg" rel="nofollow ugc">Demo</a></p>
<p>Install and activate the plugin. Insert the [ypt playlist_id=] shortcode in your page or post and insert your playlist ID after the equal. When that content is published and viewed, a Youtube player will appear and a column of thumbnails will load to the right of the player. Clicking the thumbnails switches between videos.</p>
<p>This plugin includes a small CSS file for minimal styling that was written to target the specific IDs of the thumb list and player.</p>
<p>Youtube Playlist Thumbs plugin depends on the Youtube Iframe API. Any bugs experienced with that service will affect this plugin. Please check for bugs with Youtube Iframe API before reporting a bug for this plugin.</p>
<p>See “Other Notes” for usage.</p>
<h3>Usage</h3>
<p>Place this shortcode in your posts or pages and insert your Youtube Playlist ID after the equal.</p>
<pre><code>[ypt playlist_id=]
</code></pre>
<p>To get a Youtube Playlist ID, copy the string after ‘&list=’ when viewing a playlist on Youtube.com. See screenshot #3.</p>
<p>To trigger the playback of an ordered video in the playlist, add this attribute to the clickable element:</p>
<pre><code>data-ypt-index="X"
</code></pre>
<p>Where ‘X’ is the order number of the video with the first video starting at 0. The <strong>third video would be 2</strong>. For example:</p>
<pre><code><button data-ypt-index="2">Click to play the third video.</button>
</code></pre>
<p>The ‘Now Playing’ thumbnail text and arrow is inserted by CSS. Add this rule to your CSS to change it:</p>
<pre><code>#ypt_thumbs .ypt-now-playing > span::after {
  content: "YOUR NEW TEXT" !important;
}
</code></pre>
<p>The height of the list of thumbnails is set by Javascript. It is first set when the player is ready and it adjusts when the window changes size. If you are using modals or any dynamic method to show/hide the player, you will need to trigger this function when the player is shown:</p>
<pre><code>yptThumbHeight();
</code></pre>
<p>For example, with Bootstrap modals:</p>
<pre><code>$('#videoModal').on('shown.bs.modal', function (e) { //modal shows
     yptThumbHeight(); //update the thumb height
});
</code></pre>
<p>A Javascript event triggers at the end of a playlist. It can used to trigger other events:</p>
<pre><code>jQuery(document).on('playlistEnd', function () { //playlist finished last video
    alert("That's all, thanks for watching!"); //do something
});
</code></pre>


Youtube Playlist Thumbs

Use the [ypt playlist_id=] shortcode to show a Youtube playlist with side thumbnails. Playlist videos can be triggered by links in page content.

Dependent Media Audio Playlist for Beaver Builder vs Youtube Playlist Thumbs