使用css或html的动态视频/图像样式

我可以在我的HTML页面中嵌入YouTube视频剪辑

<div class="videob">    
        <iframe title="YouTube video player" 
        class="youtube-player" type="text/html" 
        width="610" height="390" src=
        "http://www.youtube.com/embed/grh03-NjHzc"
        frameborder="0" allowFullScreen>
        </iframe>
</div>

---

我很抱歉，如果我给人的印象是模糊的，但我真正想要的是，当点击时，剪辑会出现在页面的中心，背景会变暗。类似于谷歌chrome中的“关灯”应用程序。我想做同样的图像

我更喜欢暗箱，因为Fancybox会导致IE冻结。你可以在这里查看

所以在你设置了阴影盒之后

这是头像：

<link rel="stylesheet" type="text/css" href="includes/shadowbox.css">
<script type="text/javascript" src="includes/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Shadowbox.init（）；

以下是您的视频：

<a href="http://www.youtube.com/embed/grh03-NjHzc" rel="shadowbox;width=610;height=390;" title="Nelson Mandela's inaugural address">

---

干杯

什么的中心？父页面？iframe？仅使用CSS是不可行的。你需要制作一个隐藏背景bg div，它有一个固定的位置，覆盖整个页面，给它黑色背景和一些不透明度。单击视频后，您可以使用javascript显示它和videob div。或者，您可以使用javascript创建后台div。videob div还需要有固定（或绝对）位置，您需要给它留下：50%；和左边距：-（元素宽度/2）将其定位在屏幕中央。你可以使用一个lightbox脚本，比如（他们的网站上有一个YouTube的例子），在lightbox中显示视频。