Simple Chromeless Youtube Embed - How?

Question

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:

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.
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?

What exactly do you mean by "Chromeless"? No buttons at all? — Pekka
Also most ready-made player products should support turning off controls: videojs.com/docs/options — Pekka
VideoJS seems to be able to embed Youtube: How to play Youtube videos using Video.js? perhaps you can use that, not sure though — Pekka

Brad Brad · Accepted Answer · 2013-12-11T13:55:26

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

Simple Chromeless Youtube Embed - How?

2 Answers