Question

I’m trying to use VideoJS in a website I’m developing (http://videojs.com/), however I’m trying to load a simple YouTube video on the page for testing purposes but still not working:

 <div class="video-js-box">
            <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
         <div style="position: absolute; top: 50px; left: 600px; display:none">
            <video id="my_video_1" class="video-js vjs-default-skin" controls
              preload="auto" width="640" height="264" poster="my_video_poster.png"
              data-setup="{}">
              <source src="http://www.youtube.com/watch?v=ehjDXDVpLgo" type='video/mp4'></source>
              <source src="http://www.youtube.com/watch?v=ehjDXDVpLgo" type='video/webm'></source>
            </video>
            <!-- Download links provided for devices that can't play video in the browser. -->
            <p class="vjs-no-video"><strong>Download Video:</strong>
              <a href="http://www.youtube.com/watch?v=ehjDXDVpLgo">MP4</a>,
              <a href="http://www.youtube.com/watch?v=ehjDXDVpLgo">WebM</a>,
              <a href="http://www.youtube.com/watch?v=ehjDXDVpLgo">Ogg</a><br>
              <!-- Support VideoJS by keeping this link. -->
              <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
            </p>
          </div>    
        <div style="clear:both;"></div>
    </div><!--main-->

And on the of the page I have:

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/c/video.js"></script>

Any clues what’s going wrong here? I was expecting to be able to load and play that video on my page.

Answer 1

Don’t use Youtube video to test videojs, since it’s hard to find a direct link to the video source. Check this out this question.

The code your provided links to the youtube page not to video source.

<source src="http://www.youtube.com/watch?v=ehjDXDVpLgo" type='video/mp4'></source>

The video source might be hidden in here but I’m not sure. Use your own videos hosted on your site to test.

But if you still want to use youtube videos then check out the Video.js forum, where someone provides code for a workaround.

An easier way to embed youtube videos would be to click the “share” then “embed” tab under a video page and copy and paste the code on your site.
Which would give you something like this.

<iframe width="560" height="315" 
    src="http://www.youtube.com/embed/gZKXrLjCwa8"
    frameborder="0" allowfullscreen>
</iframe>

Also I would suggest reading the Video.js documentation again on how to setup.