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

问题描述 投票：1回答：1

我是新来的，还在学习如何编写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代码相关的内容。但是再说一次。我是一个菜鸟，希望大家能帮我如何用.gif更改工作的.mp4以减小文件大小。

卢卡斯

我正在使用的模板是Emily-创意摄影作品集

html image for-loop video
1个回答
0
投票

[仅当我将<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.