YouTube API to Create Background Videos | jQuery.YoutubeBackground

Cover for Youtube API – Great for full-screen background videos or just plain videos. Just another jQuery Cover for Youtube API that allows incorporating YouTube videos into your webpage as a video background.

youtube api get video url, get youtube video duration from url, youtube api v3 get video info, get youtube video duration from url javascript, youtube api get all videos from channel

How to make use of it:

1. Include the jQuery library and the jQuery Youtube Background plugin on your internet web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="src/jquery.youtubebackground.js"></script>

2. Include the required Youtube API in your internet web page.

<script src="http://www.youtube.com/iframe_api"></script>

3. Create an empty container to position a Youtube video.

<div id="background-video"></div>

4. Call the plugin and add a Youtube video ID within the Javascript.

$('#background-video').YTPlayer({
  fitToBackground: true, // use as a background video
  videoId: 'YOUR VIDEO ID'
});

5. Default choices and settings. You can discover extra Youtube Javascript API choices on this web page.

$('#background-video').YTPlayer({
  ratio: 16 / 9, // usually either 4/3 or 16/9 -- tweak as needed
  videoId: 'ZCAnLxRvNNc', // toy robot in space is a good default, no?
  mute: true,
  repeat: true,
  width: $(window).width(),
  wrapperZIndex: 99,
  playButtonClass: 'YTPlayer-play',
  pauseButtonClass: 'YTPlayer-pause',
  muteButtonClass: 'YTPlayer-mute',
  volumeUpClass: 'YTPlayer-volume-up',
  volumeDownClass: 'YTPlayer-volume-down',
  increaseVolumeBy: 10,
  start: 0,
  fitToBackground: true
});

Fullscreen Youtube Video Background Plugin, jQuery Background Video Plugin/Github, youtube api get video by id, youtube api upload video