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() {
    plyr.setup();
});

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 */
    plyr.setup();
});

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 https://github.com/sampotts/plyr/blob/master/readme.md#youtube-embed, 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: https://cdn.plyr.io/2.0.13/plyr.css and https://cdn.plyr.io/2.0.13/plyr.js

And then added into a custom.js file

$(function() {
    plyr.setup();
});

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

Saj

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