embedding youtube video help needed.

I've put a youtube video player on my page by using a media-body and just adding the iframe code to embed a you tube video. I have then made the video player blank showing only a play button and what I would like to achieve is to have a number of buttons on the page that when pressed would change the video that is played in that particular player rather than having multiple players on the page. Any suggestions how to go about it.


That level of integration with YouTube's Player requires that you write JavaScript and use the YouTube API. You can see a tutorial here that I think can help you.

I just found pretty interesting player settings there like Changing Playback Speed. Thank you for the link.

Thanks hopefully be working on it this evening will update on how it goes.

I'm really struggling to get my head round this; i'm following the tutorial the demo page shows three thumbnails when clicked it does exactly what i'm trying to achieve. I can see what the code is doing for the most part but think i'm probably putting the code in the wrong place that's what it doesn't tell you in the tutorial. What i'm doing is creating each section of code as a new .js file is that correct or should it all be in one file. I'm naming each file I create as the function i'm calling. I know i'm doing something dumb just at a loss for what it is. Any pointers gratefully received.

It would be best to use a single JS file for the scripts. http://demo.tutorialzine.com/2015/08/how-to-control-youtubes-video-player-with-javascript/

Using Chrome inspect tool (right click on thumbnail image select inspect) I see that the thumbnail images should be set up something like the following.

< img class="thumbnail" src="images/cat_video_1.jpg" data-video-id="h14wr4pXZFk" >
< img class="thumbnail" src="images/cat_video_2.jpg" data-video-id="KkFnm-7jzOA" >
< img class="thumbnail" src="images/cat_video_3.jpg" data-video-id="Ph77yOQFihc" >

You need to have the attribute data-video-id on each image and it's value should be whatever YouTube video id is that you are trying to play for that thumbnail.

As far as I can see you probably just need whatever plugin/script and the Player Initialization JS code and the Dynamically Queue Video JS code, with your HTML code and it referenced accordingly in the JS code.

I haven't really played around with this so I couldn't really write any thorough directions.

Hope this helps :)


Thanks for the help guys; as it turns out I had followed the tutorials correctly and actually had it working all along! I did say I was probably doing something done turns out you need to upload it to your site for it to work (it needs to be online) if you just click preview and then open in browser it doesn't work. Lesson learned but boy do I feel stupid lol

I actually have it working in my preview. I decided to see if I can get it to work and I ended up making a Custom Component. I put it in my public Dropbox if anyone wants.



1 Like

Thanks Saj :)

This will come in very handy im sure for a lot of users

Martin - how long until the BSS component is available, and how soon till we have a space to share user generated components in a shared space? will there be a section of forum opened up for this?

yes thanks I ended up using yours as mine screwed up and yours is better I'm still having an issue where if I change the css in any way to alter the positions it's losing functionality to top of my week Microsoft appear to have released an update that's screwed my OS and made every folder read only so I cannot export even if I create a new folder. What a week I'm having !

I'm now trying to centre my whole page in a div that's 900px wide but can't seem to get working I put this in a blank document and it works as soon as I try to change the layout in anyway it stops working here's what i'm doing to centre it.

<link rel="stylesheet" href="styles.css" /> - in the head section


} <html> <head> <title>My Site</title> </head> <body>

<div id="wrap">

    &lt;!-- WEBSITE GOES HERE --&gt;


</body> </html>


/* "auto" makes the left and right margins center the wrapper */

<h1>wrap {</h1>

width: 900px; 
margin: 0 auto; 


Any ideas what I'm doing wrong.

I'm not sure what you have in your "website" code, but if you're using the Bootstrap coding of <div class="container"> or <div class="container-fluid"> then you're going to be fighting the Bootstrap CSS that has defined width etc.. coding and media queries as well. You either need to remove/not use those classes or you would need to override the CSS for those including their media queries rather then wrap it in another div and trying to limit the width of all of it's children.


That's exactly what's happening I,ve tried editing the code in wordpad to remove the bootsrap code but as soon as I import it back into bootstrap studio it puts the code back I might need to create the page and then remove the necessary bootsrap coding before uploading the page.

I've stripped it down to it's simplest form by not referencing any of the bootstrap stylesheets and it's still not behaving as expected.

<!DOCTYPE html>


<head> <title>Envirotech Integration Ltd</title> <link rel="stylesheet" href="assets/css/center.css"> </head>


<div id="wrap"> </div>



ok scrub the last two posts, I started from scratch again and simplified it as there are some things I need to accept are beyond me, I'm not a web designer. I now have the first two pages of my site online and i'm pretty chuffed with the results. I have two issues which need resolved on this video thing not sure if it's my laptop that's causing it firstly the video placeholder doesn't load religiously in explorer and edge works every time in safari and chrome secondly the video player doesn't move with the page if anyone can take a look and confirm if its just my laptop causing the first issue and is there a way to move the player with page.


Thanks again for all the help

Ok, so what seems to be happening is that the function for onYouTubeIframeAPIReady() is not firing, or that it's not firing at the right time because other dynamically loaded scripts are loading out of order compared to the custom players script being loaded.

I did several tests on my custom code and I had irregular loading in IE11 as well, but I could never get it to load on your site. Nor could I get it to ever load on the demo's dev page.

Until I entered into the console of my browser (IE hit F12 key click Console tab) this code $(function(){onYouTubeIframeAPIReady()});

This is supposed to be something handled already but it doesn't appear to be initialized correctly. I'm not sure why but here is my suggestion.

In your design open up the JS file tutorialzinecoms-Dynamically-Queue-Video.js and all the way at the bottom, add a couple line and then copy/paste in this snippet of code $(function(){onYouTubeIframeAPIReady()}); and save/check out if it works for you.

The snippet is a window.load or document.ready statement that is supposed to fire the function within the curly braces when the page is considered done loading. This seems to be working in my preview every refresh of the page now.

Hope that helps :)


Ok, so I redid the custom component to include all the elements you can remove them if you wish just thought you can have all the available options (play/pause etc..) in one group of code. It's not pretty just available.


After the images are 2 additional divs each contain a custom code, first includes all the additional options so if you don't want you can delete the whole div, second contains comments to provide copyright like stuff for the developer. I decided to do that on my own :)

I changed the script to be more like you would do with JQuery scripting, it's not really a big thing but it also includes the function call so that IE works.