Displaying Youtube Videos with video.js (youtube-plugin problem?)

I try to make a youtube remixer. So I can display several videos at the same time and loop parts in different speeds. It seems like the way to include the video via video.js is the easiest, as I then can use https://github.com/phhu/videojs-abloop for the looping. To use youtube with video.js I rely on: https://github.com/videojs/videojs-youtube.

And before I could get any further, I fail with the playback of youtube videos. Even the one in the example of the doc does not work for me.

You can see my test website here: https://frill-thankful-hurricane.glitch.me/test
The Code for the html is:

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <video id="example_video_1" class="video-js vjs-default-skin" controls 
       preload="auto" width="640" height="264"
       poster="http://ec2-54-227-116-247.compute-1.amazonaws.com/models/site-templates/images/cover_img/ted_cover.jpg" 
       data-setup='{"techOrder":["youtube"], "src":"http://www.youtube.com/watch?v=xYemnKEKx0c"}'>
</video>
  </body>
</html>

And the package.json has:

  },
  "dependencies": {
    "express": "^4.17.1",
    "sqlite3": "^4.1.1",
    "video.js": "^7.8.2",
    "videojs-youtube": "^2.6.1",
    "videojs-abloop": "^1.1.2"
  },
  "engines": {
    "node": "12.x"
  },

I searched through stackoverflow, but most posts are very old and the examples, that are marked as correct are not working for me. Maybe I skipped something important?

1 thought on “Displaying Youtube Videos with video.js (youtube-plugin problem?)”

Leave a Comment