2

Question:

Please, can someone explain exactly, clearly, how I can embed a simple Chromeless Youtube player in my page, and control the source of that player dynamically?

Question Explained: I'm working with a page where I need to embed a youtube video with no controls at all. After some research I found that a Chromeless video player is exactly that. But here's my problem:

  1. I have found little to no tutorial content on a Chromeless player, and being relatively new to Javascript, I'm having trouble understanding the documentation provided here in a way that I can apply it to my problem.

  2. I need to change sources of this video based on user interaction. I had originally, not yet being comfortable with the youtube javascript API, simply embedded the videos via static iframe and changed the source of the iframes via JQuery with .attr("src",nameofsource), not loading the embeds with javascript, only changing the sources.

That worked ok, I was able to hide most of the controls via the parameters that youtube accepts attached to the embed url, but there was absolutely no way to mute the video with that method, and the code was plain ugly, and I was not happy with it.

So I've started embedding the videos and changing the source all through the API, which works great, the video is muted, and changes source nicely, but now I'm faced with the issue of having the controls showing up.

According to the documentation I saw on a Chromeless Player, I didn't see that it was a matter of just adding a parameter to the javascript YT API, but something completely different.

Question Restated:

So please, can someone explain exactly, clearly, how I can embed a simple Chromeless Youtube player in my page, and control the source of that player dynamically?

There is no documentation that I have found on the internet that provides a satisfactory, comprehensive (friendly to new javascript developers) explanation of how to do this. As a new developer, I have looked into the documentation, but I am not yet experienced enough to effectively 'use the manual' on this one.

There were a few questions that I found on StackOverflow regarding a chromeless player, but none of them had even remotely satisfactory answers.

Known Documentation:

https://developers.google.com/youtube/flash_api_reference

https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

http://viget.com/inspire/youtube-chromeless-video-jquery-plugin

Known Related StackOverflow Questions with inadequate answers:

[23K views, Inadequate Answer] : How do I go about embedding a youtube chromeless player without adding controls?

[1.4K views, Inadequate Answer] : How to make a YouTube chromeless player?

Community
  • 1
  • 1
  • What exactly do you mean by "Chromeless"? No buttons at all? – Pekka Dec 10 '13 at 23:37
  • Yes, exactly. No controls directly on the video. @Pekka웃 –  Dec 10 '13 at 23:39
  • Also most ready-made player products should support turning off controls: http://www.videojs.com/docs/options/ – Pekka Dec 10 '13 at 23:51
  • Ahh hold on you want Youtube, one sec – Pekka Dec 10 '13 at 23:52
  • VideoJS seems to be able to embed Youtube: [How to play Youtube videos using Video.js?](http://stackoverflow.com/q/17292169) perhaps you can use that, not sure though – Pekka Dec 10 '13 at 23:54
  • @Pekka웃 the link there is a question where people are talking about difficulty, "working on it", etc, I don't think that's going to help here. –  Dec 11 '13 at 01:05
  • I don't know how you expect us to help you when you say you don't want to use the YouTube JavaScript API... This is trivial if you just pass in the right options. `playerVars: { controls: 0, autoplay: 1, disablekb: 1, enablejsapi: 1, iv_load_policy: 3, modestbranding: 1, showinfo: 0 }` – Brad Dec 11 '13 at 03:55
  • I didn't imply in any way that I didn't want to use the API, read that through again. On the contrary, I much prefer the API. @Brad –  Dec 11 '13 at 05:03
  • Also, I'm looking at the documentation and do not see, at first glance, an explanation nor example on how/where to pass in `playerVars: { controls: 0, autoplay: 1, disablekb: 1, enablejsapi: 1, iv_load_policy: 3, modestbranding: 1, showinfo: 0 }` Could you include that as an answer with a simple example script? –  Dec 11 '13 at 05:07
  • Possible duplicate of [How do I go about embedding a youtube chromeless player without adding controls?](https://stackoverflow.com/questions/2626966/how-do-i-go-about-embedding-a-youtube-chromeless-player-without-adding-controls) – rogerdpack Sep 10 '17 at 06:12
  • If those other questions are, in essence, the same but have an inadequate answer, you typically would want to add a "bounty" to them instead of re-asking FWIW :\ – rogerdpack Sep 10 '17 at 06:13

2 Answers2

3

In your HTML you need:

<script src="https://www.youtube.com/iframe_api"></script>
<div id="player"></div>

Then in your JavaScript

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        videoId: 'OJpQgSZ49tk',
        playerVars: {
            controls: 0,
            autoplay: 1,
            disablekb: 1,
            enablejsapi: 1,
            iv_load_policy: 3,
            modestbranding: 1,
            showinfo: 0
        }
    });
}

The onYouTubeIframeAPIReady function is called by YouTube's API when it's done loading. Additional parameters and other examples can be found on the documentation: https://developers.google.com/youtube/iframe_api_reference

Brad
  • 159,648
  • 54
  • 349
  • 530
  • Ok, this is enough for my problem, but this will produce "modest branding," and I think there is a difference between modest branding and no controls and an actual Chromeless Youtube player, so I'll leave this question unanswered until someone provides, specifically, directions on how to embed a Chromeless Youtube Player. Since we're seeing other unanswered questions on the topic, and youtube does provide some sort of documentation on it, I assume it's a valid question. –  Dec 11 '13 at 21:29
  • @jt0dd What you see here is the closest you can do. YouTube isn't going to let you remove everything. – Brad Dec 11 '13 at 21:30
  • Oh really? That does seem true. But while we have this question up, and formatted right, we might as well get an answer on how to use the Chromeless player, since that is something very different, and who knows, my next project might need a player with custom controls, which is only doable through the chromeless player. –  Dec 11 '13 at 21:45
0

Youtube won't let you get rid of everything, but you could try http://mediaelementjs.com/ - that allows you to control the display of the controls, and hide them if you want.

user3592428
  • 1
  • Whilst this may theoretically answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Mat Oct 11 '16 at 11:51