Using plyr to embed responsive Youtube videos

I'm attempting to use plyr to put YouTube videos on a page. It looks stupid simple, but I can't get it to work...

According to the documentation posted on GitHub, it appears I need to create a div, add a data-type="youtube" and the video's YouTube ID as the div's id and add a link to the CSS and JavaScript libraries...then I need to add plyr.setup(); to my user.js file.

I also tried adding this to users.js with no luck:

// Play Youtube Videos
$(document).ready(function() {

Any ideas for how to set up a YouTube video in Bootstrap Studio via Plyr are greatly appreciated.

i'd try to add to your user.js something like this:

/* this part to init plyr function */
$(function() {  /* this is the jQuery equivalent of documents.ready */

Javascript functionality is stripped from running within the app it's self, you have to use the Preview button at the top right to view the site in a web browser environment.

I think this is the part your referring to about ID, it's a data-video-id attribute not the DIV's ID.

This is all that I put in my test page.

<div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>

Added the CDN versions of the CSS/JS: and

And then added into a custom.js file

$(function() {

Used the Preview button and it worked for me. It does not show within the BSS app though.


Thank you! I'll give it a try again.