How to Embed Video on Your Site

Table of Contents

1. Only Showing Play Icon for YouTube Video
2. Vimeo Video
3. Load YouTube iFrame from JavaScript

Introduction

This post covers a few tips for embedding videos from YouTube and Vimeo on your website, including customizing the player appearance and loading the YouTube iFrame via JavaScript.

Only Showing Play Icon for YouTube Video

If you don't like YouTube's default settings such as the title and YouTube mark, just append the following parameters to your YouTube URL and your embedded YouTube video will look like the 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, visit the YouTube Embedded Players and Player Parameters documentation.

Vimeo Video

Following is another video site, Vimeo's default view. A good thing about Vimeo is that you can easily change the play icon color like the following.

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
});

Conclusion

Embedding videos on your site is straightforward. YouTube allows you to customize the player appearance with URL parameters, Vimeo offers easy icon color changes, and you can also load the YouTube iFrame dynamically via JavaScript for more control over player behavior.