How to Embedded Video on Your Site

2014/10/41 min read
bookmark this
Responsive image

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.


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="" width="300" height="128" frameborder="0" allowfullscreen=""> 



Load youtube iFrame from javascript


// Load API asynchronously.
var tag = document.createElement('script');
tag.src = "";
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( === 0) {          

    $('#player').show(); // show player
    player.playVideo(); // begin playback