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

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并直接向video标记提供id或类.所以你的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;}

这是一个演示