Cómo incrustar video h.264 de ancho completo y receptivo en la página web - wordpress, html5, video, responsive-design, pantalla completa

Tengo un video en h.264 codec y quiero que se reproduzca automáticamente en todo el ancho en mi página web. Hasta ahora estoy usando un contenedor html5 swiffy con un swf y un contenedor css para obtener una animación receptiva en cualquier dispositivo:

CSS

.wrapper  {
max-height: initial !important;
margin 0 !important;
}

HTML

<div class="wrapper">
<div class="h_iframe">
<img class="ratio" src="/images/http://www.geronimo-film.de/wp-content/uploads/Imagefilm-Köln.jpg"/>
<iframe src="http://www.geronimo-film.de/wp-content/flash/geronimo.html"></iframe>
</div>
</div>

Lo mismo que me gusta hacer con mi video. ¿Me puedes ayudar?

Respuestas

0 para la respuesta № 1

Editar: Durante la discusión con el autor de la pregunta se mostró que el video en sí tiene un borde. Este enfoque corta el video y lo dibuja en un lienzo. Esto se basa en el video de quien pregunta: los valores pueden diferir para diferentes videos. También tenga en cuenta que debe editar el código si cambia el tamaño del video de origen:

HTML:

<video controls autoplay loop id="video">
<source src="http://www.geronimo-film.de/wp-content/flash/animation.mp4" type="video/mp4">
<p>Your browser does not support H.264/MP4.</p>
</video>

<div class="wrapper">
<canvas id="cropCvs" width="1800" height="700></canvas>
</div>

JS (basado en este tutorial)

function loop() {
var video = document.getElementById("video");
ctx.drawImage(video, 10, 195, 1800, 700, 0, 0, 1800, 700);
setTimeout(loop, 1000 / 30);
}
var canvas = document.getElementById("cropCvs");
var ctx = canvas.getContext("2d");
loop();

CSS:

.wrapper {
margin 0 !important;
}

video {
display: none;
}

#cropCvs {
width: 100%;
display: block;
}

https://jsfiddle.net/w6g9ofkc/

---

Esto está funcionando si el video no tiene borde renderizado:

HTML:

<div class="wrapper">
<video controls autoplay loop>
<source src="your_video_path.mp4" type="video/mp4">
<p>Your browser does not support H.264/MP4.</p>
</video>
</div>

CSS

.wrapper {
margin 0 !important;
}

video{
width: 100%;
object-fit: fill; /*can also be contain depending on the input data*/
}

https://jsfiddle.net/xo7c2w9t/3

---