Question

我想在我的网站上播放的视频周围放一个红色边框。这是我的代码。

    <div class="yotube_video">
        <video width="700" height="525" controls="controls" scrolling="no" >
            <source src="video/promo_video.mp4" type="video/mp4">
        </video>
    </div>

和样式表包括

div.youtube_video{
border:5px solid red;}

为什么我没有获得视频边框。请帮忙。此外，是否有任何在线帮助，以使视频更具艺术性？

提前致谢， aqzr

Answer 1

在您的HTML中写道：

<div class="yotube_video">

然后在你的CSS中写道：

div.youtube_video

HTML和CSS中的类名应该相同。在您的HTML文件中，您忘记了“u”。它应该是这样的：

<强> HTML

<div class="youtube_video">
<video width="700" height="525" controls src="video/promo_video.mp4" type="video/mp4">
</video>
</div>

controls="controls"不存在。如果要启用它们，您只需编写controls即可。 scrolling不存在。只有当您为不同的浏览器提供以不同格式编码的多个源文件时，才需要标记source。在您的示例中，它不应该是必要的。只需使用src即可。

<强> CSS

div.youtube_video{
border:5px solid red;}

无论如何，因为您正在使用video标记，这是HTML5中引入的新标记以提供更好的语义，您可以避免使用包装div并直接向id或类提供video标记。因此， HTML 会变成这样：

<video class="youtube_video" width="700" height="525" controls src="video/promo_video.mp4" type="video/mp4">
</video>

您的 CSS 会变成这样：

.youtube_video{
    border:5px solid red;}

这是DEMO

Answer 2

div.yotube_video{
border:5px solid red;
}

上面的您的班级名称是yotube_video，您输入了youtube_video

Answer 3

在您的video元素上应用课程，而不是div

video{
   border:5px solid red;
}

小提琴是HERE

OR 其他方法如下

您可以提供ID个video元素作为

<div>
        <video id="yotube_video" width="700" height="525" controls="controls" scrolling="no" >
            <source src="video/promo_video.mp4" type="video/mp4">
        </video>
 </div>

并在CSS上将ID应用为

#yotube_video{
     border:5px solid red;
}

小提琴是HERE

边框标记无法在HTML5视频标记中使用

3 个答案: