你可以在视频元素上显示css box shadow（插图）

我为<div>添加了一个方块阴影，并在div上添加了一个<video>元素。框阴影显示在div上，但它不影响视频元素。你可以在视频元素上显示css box shadow（插图）

这是预期的行为，有没有办法让箱子影子也影响视频？

代码片段：

.video-player { 
 
    -webkit-box-shadow: inset 0px 0px 103px 0px rgba(0,0,0,0.75); 
 
    -moz-box-shadow: inset 0px 0px 103px 0px rgba(0,0,0,0.75); 
 
    box-shadow: inset 0px 0px 103px 0px rgba(0,0,0,0.75); 
 
}

<div class="video-player"> 
 
    <video width="100%"> 
 
     <source src="http://bit.ly/1wIsuB2" type="video/mp4" /> 
 
    </video> 
 
    <h1>Test</h1> 
 
</div>

这显然不是一个大问题，但我觉得这相当有趣。

编辑：JSFiddle

编辑2：这是插图阴影

EDIT 3：，能够显示视频元件上的插图阴影。它需要额外的提示。如果你想达到这个目的，请看答案@cport1给出的

来源

2014-11-06 Jones

你能不能给一个链接的jsfiddle？ – Karmacoma 2014-11-06 18:41:06

如果视频是Flash，则可能需要更改视频本身的透明度。请参阅：http://www.aleosoft.com/flashtutorial_transparent.html – 2014-11-06 19:00:29

该视频是一个MP4。我添加了一个JSFiddle（http://jsfiddle.net/dbt6g5ra/） – Jones 2014-11-06 19:03:48

box-shadow是父元素的一部分，因此它在视频下呈现。一种选择是有哪些地方阴影的视频，像这样一个div：

http://jsfiddle.net/dbt6g5ra/1/

<div class="video-player"> 
    <video class="vid" width="100%"> 
     <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> 
    </video> 
    <h1>Test</h1> 
    <div class="shadow"></div> 
</div> 


.video-player { 
//styles 

} 
.shadow { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    box-shadow: inset 0px 0px 36px 36px rgba(0,0,0,0.75); 
    top: 0; 
    left: 0; 
}

来源

2014-11-06 19:13:28 cport1

啊，这很有趣。所以视频呈现在'div'的上方，但div内的其他元素受到盒子阴影的影响。 – Jones 2014-11-06 19:19:03

是否还有其他像'

an 标签的行为与

-1

video元素延伸到视频高度并停止。它应用了阴影，但你看不到它。如果将阴影和底部填充（例如30px）添加到video元素，则会出现阴影。

编辑： 我想指出，我完全错过了OP想要一个插图阴影下，OP以来编辑标题，使之更清楚。

来源

2014-11-06 19:07:58

我试图给视频添加填充和阴影，但视频仍然不受阴影的影响。 http://jsfiddle.net/gzcj7f7q/1/ – Jones 2014-11-06 19:15:23

我可以看到你的jsfiddle在Firefox中的影子？你使用的是什么浏览器？ – 2014-11-06 19:49:52

下面是我书中一个示例的box-shadow示例，它很好用：http://html5multimedia.com/code/ch6/css-round-corners-and-shadow.html – 2014-11-06 20:20:05

-2

只要做到这一点

.video-player { 
    box-shadow: -1px 1px 5px #888; 
}

来源

2014-11-06 19:20:50 vcrzy

这似乎并没有做太多 – Jones 2014-11-06 19:22:20

我在我的电脑中做过，并且运行良好。但我改变了宽度为90％.Hugs – vcrzy 2014-11-06 19:23:26

@Jones正在请求插入框阴影。 – cport1 2014-11-06 20:29:20

你可以在视频元素上显示css box shadow（插图）

回答

相关问题