How to Embedded Video on Your Site

Only showing Play Icon for youtube video

If you don't like youtube default setting as, title, youtube mark, just append following parameters to your youtube url and your embed youtube will looks like following.

?showinfo=0&color=white&autohide=1

http://www.youtube.com/embed/9tzyJEwO9Os?showinfo=0&color=white&autohide=1

if you want to check the rest of the parameters. 

 YouTube Embedded Players and Player Parameters

 

vimeo video

Following is another video site, vimeo's default view. Good thing for vimeo is you can easily change the play icon color like following.

<iframe src="http://player.vimeo.com/video/108883478?title=0&byline=0&portrait=0&color=a89767" width="300" height="128" frameborder="0" allowfullscreen=""> 

 

 

Load youtube iFrame from javascript

from http://stackoverflow.com/questions/18220209/load-youtube-video-listen-to-onplayerstatechange

// Load API asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '220',
        width: '300',
        videoId: '9tzyJEwO9Os',
        playerVars: {'showinfo': 0, 'color': 'white', 'autohide': 1},
        events: {'onStateChange': onPlayerStateChange}
    });
}

function onPlayerStateChange(event) {    
    if(event.data === 0) {          
        hideVideo();
    }
}

$("#link").click(function(){
    $('#player').show(); // show player
    player.playVideo(); // begin playback
});