VideoJs Custom YouTube Embed Player

VideoJs Custom YouTube Embed Player

There are 2 Ways to Integrate .I will show you the simplest way.

Ways :- 

    1. Go and see Documentation :- https://www.npmjs.com/package/videojs-youtube

    2. See Below ---

Add CDNs To Your WebPage :- 

1. Css CDN Before </head> Tag

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.12.0/video-js.min.css" />

HTML

2. JavaScript CDNs before </body> Tag

<script
src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.12.0/video.min.js"></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.1/Youtube.min.js"></script>

HTML

3. And add <video> Tag with type="video/youtube" in body ( where you want to place video )

<video
   id="my-video"
   class="video-js"
   controls
   preload="auto"
   width="640"
   height="364"
   data-setup="{}">
  <source src="https://www.youtube.com/watch?v=HdeI82TVQk0" type="video/youtube" /> </video>

HTML

Related Links

• See Demo :- https://videojs.sh20raj.repl.co/youtubeplayer.html
• Sample Code :- https://replit.com/@SH20RAJ/VideoJS#youtubeplayer.html
• Add Skins to Video Player :- Video-js Custom Skin Implement ( City , Fantasy , Forest , Sea )
• Codepen Demo :- https://codepen.io/SH20RAJ/pen/rNjYrWd
• Advanced Way to add VideoJs To YT Player :-  https://www.npmjs.com/package/videojs-youtube