Wordpress 如何在网页上嵌入h.264视频的全宽和响应性

我有一个h.264编解码器的视频，希望它能在我的网页上全宽自动播放。直到现在，我还在使用html5 swiffy容器，其中包含swf和css包装，以在任何设备上获得响应动画：

CSS

HTML

我喜欢用我的视频做同样的事情。

---

你能帮我吗？

编辑：在与提问者的讨论中，视频本身有一个边框。这种方法裁剪视频并将其绘制到画布上。这是基于询问者的视频-不同视频的值可能不同。如果更改源视频大小，请记住编辑代码：

HTML:

CSS:

---

如果视频没有渲染边框，则此操作有效：

HTML:

---

编辑：在与询问者的讨论中，视频本身有一个边界。这种方法裁剪视频并将其绘制到画布上。这是基于询问者的视频-不同视频的值可能不同。如果更改源视频大小，请记住编辑代码：

HTML:

CSS:

---

如果视频没有渲染边框，则此操作有效：

HTML:

---

可能需要知道我在使用wordpress。您应该将wordpress添加到问题的标签中可能需要知道我在使用wordpress。您应该将wordpress添加到问题的标签中谢谢！这很有效。但现在我在视频的顶部和底部有两个黑色条。我知道它们来自渲染视频。但是，有没有可能以一种它们消失的方式来调整它的大小呢？不幸的是，尽管使用了对象匹配，这些条仍然保持不变。当我删除宽度：100%时，它将不再有响应。你能添加一个命令来循环视频吗？对不起，我是新手：）这就像自动播放一样简单；）只需添加

循环

作为属性。您是否手动设置视频的高度（通过CSS或作为视频标签中的高度属性）？您使用的是哪个浏览器版本？请参阅此提琴：-它按预期工作（您可以调整预览部分的大小）谢谢！这很有效。但现在我在视频的顶部和底部有两个黑色条。我知道它们来自渲染视频。但是，有没有可能以一种它们消失的方式来调整它的大小呢？不幸的是，尽管使用了对象匹配，这些条仍然保持不变。当我删除宽度：100%时，它将不再有响应。你能添加一个命令来循环视频吗？对不起，我是新手：）这就像自动播放一样简单；）只需添加

循环

作为属性。您是否手动设置视频的高度（通过CSS或作为视频标签中的高度属性）？您使用的浏览器版本是什么？请参阅此提琴：-它按预期工作（您可以调整预览零件的大小）

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

<div class="wrapper">
<div class="h_iframe">
         <img class="ratio" src="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>

<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>

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();

.wrapper {
  margin 0 !important;
}

video {
  display: none;
}

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

<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>

.wrapper {
  margin 0 !important;
}

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