VideoJS Audio But No Video

Question

I'm trying to host my videos with Vimeo and use VideoJS to display them on the front end. Here is the sample page:

https://jsfiddle.net/zhdnmxt8/

<div>
    <video id="example_video_1" class="video-js vjs-default-skin"
      controls preload="auto" width="auto" height="auto"
      data-setup='{}'>
            <source src="//player.vimeo.com[...]" type="video/mp4" data-quality="hd" data-res="HD" data-default="true">
            <source src="//player.vimeo.com/[...]" type="video/mp4" data-res="SD">
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>.</p>
    </video>
</div>

Press Play to get the audio but there's no video that displays. Why is this?

Note: VideoJS CDN JS and CSS are included via External Resources at JSFiddle.

Answer 1

Set a height, auto won't do. Try for example 500px, that should do it.

Demo here.

Answer 2

Set a height and width.

width="500" height="500"

https://jsfiddle.net/zhdnmxt8/1/

Answer 3

The reason why I was going with an auto height and width is because I wanted to make the VideoJS container responsive. That's why I didn't want to hardcode the values into the player.

The best solution I found is at:

video.js size to fit div

with one minor change to the .video-js CSS override:

.video-js { padding-top: 56.25% }

(This ensures that the video displays in the viewport.) 56.25% is a magical 16:9 padding number that I found from this article (this full article didn't solve my problem completely but rather provided a missing puzzle piece):

http://coolestguidesontheplanet.com/videodrome/videojs/

Thanks all!

Answer 4

Actually, when i was playing video locally its given me same issue. It only play the audio with black screen but afterwards i uploaded same html file to the server and then i run it and now it playing both audio as well as video.