<video id="example_video_direct_link"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
width="640"
height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{
"example_option":true
}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
</p>
</video>
<video id="example_video_youtube"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
width="640"
height="360"
data-setup='{
"techOrder": ["youtube"],
"src": "https://www.youtube.com/watch?v=DrZfYbOr6sE"
}'>
</video>
- GitHub
- Additional player options:
- ytcontrols (Boolean): Display the YouTube player controls instead of the Video.js player controls. (default false)
- quality (String): Set the default video quality. Should be one of 1080p, 720p, 480p, 360p, 240p, 144p.
- playsInline (Boolean): Sets the playsinline YouTube player parameter to enable inline playback on iOS
- forceHTML5 (Boolean): Forces loading the YouTube HTML5 player (default true)
- forceSSL (Boolean): Forces loading the YouTube API over https (default true)
<video id="example_video_vimeo"
class="video-js vjs-default-skin"
controls
preload="auto"
width="640"
height="360"
data-setup='{
"techOrder": ["vimeo"],
"src": "https://vimeo.com/63186969"
}'>
</video>
- GitHub
- Not possible to override Vimeo controls
<video id="example_video_vimeo"
class="video-js vjs-default-skin"
controls
preload="auto"
width="640"
height="360"
data-setup='{
"techOrder": ["dailymotion"],
"src": "https://www.dailymotion.com/video/xxxasl_fail-compilation-february-2013-tnl_fun"
}'>
</video>