在模板中嵌入 html5 视频/更改视频图像答案

【问题标题】：Embed html5 video in Template / Change image for video在模板中嵌入 html5 视频/更改视频图像
【发布时间】：2019-11-15 04:42:44
【问题描述】：

我是新来的，还在学习如何编写 html 和 css。我正在使用模板制作我的作品集。现在我有一些想要嵌入和使用 gif 图像的动态图像。只有它们变得太大，所以我想切换到 html5 视频。

只有当我将<img 更改为<video 时，整个画廊才会崩溃。所以我猜css不支持html5视频。

这是现在的html：

<div class="ms-section__block">
          <div id="gallery">
            <img alt="image 2"
            src="assets/images/gallery/social/gif2.gif"
            data-description="image placeholder"> 
            <img alt="image 2"
            src="assets/images/gallery/social/gif2.gif"
            data-description="image placeholder"> 
            <img alt="image 2"
            src="assets/images/gallery/social/gif2.gif"
            data-description="image placeholder">

CSS 主要：

.ms-section__block {
    width: 85%;
    max-width: 88em;
    margin: 0 auto 6em;

这是我能找到的唯一与 html 代码相关的东西。但又一次。我是个菜鸟，希望你们能帮助我如何用.mp4 更改工作的.gif 以减小文件大小。

卢卡斯

我使用的模板是 Emily - Creative Photography Portfolio

【问题讨论】：

标签： html image for-loop video

【解决方案1】：

只有当我将<img> 更改为<video> 时，整个画廊才会崩溃。

不清楚您的问题是什么。您发布的所有代码所做的就是将三个项目并排放置。我可以将其中一项更改为<video> 标签。我无法重现崩溃。

如果以下代码不是您所需要的，请链接一个示例页面，显示正在运行的“折叠”问题。

<!DOCTYPE html>
<html>

<style>

.ms-section__block 
{
    width: 85%;
    max-width: 88em;
    margin: 0 auto 6em;
}

</style>

<body>

<div class="ms-section__block">
    <div id="gallery">
    <img alt="image 2"
    src="assets/images/gallery/social/gif2.gif"
    data-description="image placeholder">

    <video width="320" height="240" controls>
    <source src="yourVideoFile.mp4" type="video/mp4">
    </video>

    <img alt="image 2"
    src="assets/images/gallery/social/gif2.gif"
    data-description="image placeholder">

    </div>
</div>

</body>
</html>

【讨论】：