JSFiddle - React, Tailwind, and code Playground

by Leo Lanese

HTML

<video poster="http://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg" controls preload="none">
    <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />
    <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm" type="video/webm" />
</video>

CSS

video {
   width: 100%;
   height: auto;
}

* {
    margin:0;padding:0;
}

JavaScript

/*
So that is working right?. What's the problem?

Aspect ratio is the problem.

If we are providing the video we can control the aspect ratio of the movie and deliver the right video for the right environment, if we don't provide he video we don't (youtube, vimeo, etc) we need to use <iframe>

*/

/*
Compatibility:

IE9+, Firefox, Opera, Chrome, and Safari support the HTML5 <video> element

*/