Question

我修改了一个免费的网站。您可以在那里找到的原始项目： http://www.free-css.com/free-css-templates/page193/munter

我的更改后： http://www.megafileupload.com/o9xK/Munter_Stackoverflow.rar

我的问题： 1。 a）我添加了一个视频。它适用于Microsoft Edge和Microsoft Explorer。我有Mozzila Firefox的问题。我使用了w3school的视频。当我在Mozzila Firefox的浏览器中看到它时，w3school网站上的视频一切正常。同样的视频（我已经下载过）在我的项目网站上并不起作用。我可以看到它，但播放按钮不起作用。该视频仅在右键点击视频后才有效，并选择“播放”。要停止播放视频，我需要右键点击视频然后按“停止”。

<html>
 <!-- === SLide 3 - Portfolio -->
    <div class="slide story" id="slide-3" data-slide="3">
        <div class="container"> 
            <div class="row title-row">
                    <div class="col-12 font-thin"> Tekst 1 <span class="font-semibold"> Tekst 2</span></div>
                </div>
                  <!-- /row -->
                <div class="hr">&nbsp;
                    <div class="video"> 
                        <video controls>
                            <source src="images/video.mp4" type="video/mp4" preload="true">
                            <source src="images/video.ogg" type="video/ogg">
                            <p>Your browser does not support H.264/MP4.</p>
                        </video>
                    </div>
                </div>
        </div><!-- /row -->
</div><!-- /slide3 -->

</html>

 #slide-3 {
    background-color: #FFCC33;
    color: #e4e6e5;
    padding-top: 90px;
}
.title-row {
        font-size: 34px;        
}

    #video{                             
        display: block;
        margin: 0 auto; 
        border-radius: 5px;
        box-shadow: 0px 0px 0px 0px gray;
        width: 404px;  /* 320 */
        height: 720px;  /* 568 */
    }

@media (max-width: 767px) {
    #slide-3 .col-12 {
        width: 100%;
    }
}

b）视频上的文字以容器为中心，但每次更改浏览器窗口大小时，它都会转到右侧。

如何移动＆＃39; h1＆＃39;文字＆＃34; MUNTER DESIGN＆＃34;没有改变＆＃39;幻灯片2＆＃39;位置。

我试过移动＆＃39; h1＆＃39;文本向上，导航栏下约50px。当我改变了＆＃39; h1＆＃39;从原始130px到0px（减去不起作用）就像那样：

    #slide-1 h1 {
    padding-top: 0px;
}

＆＃39; h1＆＃39;导航栏下的文字约为100px，而幻灯片2＆＃39;更高。我改变了＆＃39; h1＆＃39;从130到0，＆＃39;幻灯片2＆＃39;大约高出130px。我希望改变＆＃39; h1＆＃39;文字，不是＆＃39;幻灯片2＆＃39;位置。我想要＆＃39;滑动2＆＃39;在oryginal版本中定位相同。

我无法移动＆＃39; h1＆＃39;关于我想要的信息的文字，非常靠近导航栏。

Answer 1

1。 a）视频播放问题是由jQuery引起的，没有jquery-1.10.2.min.js控件工作。我建议使用jQuery视频播放器。

b）使用bootstrap helper center-block，这会使你的div居中。请注意，如果您更改浏览器尺寸并且不重新加载网站，该位置可能仍会更改。

<div class="row title-row center-block">

在你的style.css中更改以下内容：
```
#slide-1 h1 {
    margin-top: 0px;
}

#home-row-1, #home-row-2 {
    padding-top: 0px;
}
```
如果您想查看哪些元素会影响DOM中的内容，请使用浏览器开发人员工具。

在更改浏览器大小期间文本位置，视频仅在Firefox中不起作用

1 个答案: