Javascript 全屏视频触发器

的主页上有一个“播放”按钮，单击该按钮可触发全屏html视频

---

如何创建自动触发全屏html视频的按钮/功能？

我查看了Airbnb主页，看到了视频和您正在谈论的效果。您需要的是lightbox的“视频”版本。这实际上是一个很容易达到的效果。您需要的是：

按钮

一个

div

作为灯箱，在触发按钮的

onclick

事件后出现

一个

div

将视频嵌套在其中

要显示的实际视频

关闭灯箱的关闭按钮

我在这里为您创建了一个简单的版本

您也可以使用下面的代码段来检查它

$（文档）.ready（函数（）{
//单击按钮后，使灯箱在1秒内淡入，隐藏自身并启动视频
$（“#按钮”）。在（“单击”，函数（）{
$（“#灯箱”）.fadeIn（1000）；
$（this.hide（）；
//一个不使用YouTube api启动视频的简单方法
var videoURL=$（'#video'）.prop（'src'）；
videoURL+=“？自动播放=1”；
$（'#video'）.prop（'src'，videoURL）；
});
//单击关闭按钮时，使灯箱在0.5秒内淡出并显示播放按钮
$（“#关闭btn”）。在（“单击”，函数（）上{
$（“#灯箱”）。淡出（500）；
$（“#按钮”）.show（250）；
});
});
#按钮{
/*正文*/
字体大小：45px；
/*尺寸*/
宽度：100px；
高度：100px；
/*定位*/
位置：固定；
最高：50%；
左：50%；
z指数：2；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
/*上面的代码确保视频是正确的
垂直和水平居中
到屏幕*/
/*造型*/
背景色：rgba（0,0,0,0.95）；
边框：0；/*删除讨厌的灰色边框*/
边界半径：50%；/*使其成为一个圆*/
轮廓：无；/*单击后放弃令人烦恼的蓝色轮廓*/
光标：指针；
盒影：0px 0px 0px 2px rgba（0,0,0,0.25）；
/*-----转换------*/
-webkit变换：比例（1,1）；
-moz变换：比例（1,1）；
-ms变换：比例（1,1）；
-o变换：标度（1,1）；
变换：比例（1,1）；
/*-----过渡------*/
-webkit转型：转型。5s轻松；
-moz过渡：转换。5s轻松；
-ms转型：转型。5s轻松；
-o-过渡：转变。5s轻松；
转型：转型。5s轻松；
}
#按钮：悬停{
/*-----转换------*/
-webkit转换：规模（1.2,1.2）；
-moz变换：比例（1.2,1.2）；
-ms变换：比例（1.2,1.2）；
-o变换：比例（1.2,1.2）；
变换：比例（1.2,1.2）；
/*-----过渡------*/
-webkit转型：转型。5s轻松；
-moz过渡：转换。5s轻松；
-ms转型：转型。5s轻松；
-o-过渡：转变。5s轻松；
转型：转型。5s轻松；
}
#按钮>i{
/*正文*/
颜色：灰色；
文本阴影：1px1pRGBA（255,255,255,0.2）；
/*使游戏标志为3d*/
/*定位*/
位置：相对位置；
利润上限：4倍；
左边距：6px；
/*-----过渡------*/
-webkit过渡：颜色。5s轻松；
-moz过渡：颜色。5s轻松；
-ms过渡：颜色。5s轻松；
-o-过渡：颜色。5s轻松；
过渡：颜色。5s轻松；
}
#按钮：悬停>i{
/*正文*/
颜色：白色；
/*-----过渡------*/
-webkit过渡：颜色。5s轻松；
-moz过渡：颜色。5s轻松；
-ms过渡：颜色。5s轻松；
-o-过渡：颜色。5s轻松；
过渡：颜色。5s轻松；
/*当我们将鼠标悬停在按钮上时，使播放标志变为白色*/
}
#灯箱{
/*-----定位------*/
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
z指数：1；
/*上面的代码确保
lightbox覆盖了整个页面*/
/*-----能见度------*/
显示：无；
/*-----造型------*/
背景色：rgba（0,0,0,0.95）；
/*通常，大多数灯箱不使用
一种完全纯黑，但有大约
90-95%的不透明度，使背景
有点明显*/
}
#视频包装器{
/*-----定位------*/
位置：绝对位置；
最高：50%；
左：50%；
z指数：2；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
/*上面的代码确保视频是正确的
垂直和水平居中
到屏幕*/
/*-----造型------*/
盒影：0px 0px 5px 1px rgba（0,0,0,0.1）；
/*上面的代码用于为视频添加一点阴影，使混合效果更好*/
}
#关闭btn{
/*-----文本------*/
颜色：灰色；
字体大小：25px；
/*-----定位------*/
位置：固定；
最高：3%；
右：3%；
z指数：2；
/*上面的代码用于将按钮置于灯箱的右上角*/
/*-----转换------*/
-webkit变换：比例（1,1）；
-moz变换：比例（1,1）；
-ms变换：比例（1,1）；
-o变换：标度（1,1）；
变换：比例（1,1）；
/*上面的代码用于初始化按钮的刻度，以便在转换中使用*/
/*-----过渡------*/
-webkit过渡：变换。5s轻松，色彩。5s轻松；
-moz过渡：变换。5s轻松，色彩。5s轻松；
-ms过渡：变换。5s轻松，色彩。5s轻松；
-o型过渡：变换。5s轻松，色彩。5s轻松；
过渡：变换。5s轻松，色彩。5s轻松；
}
#关闭btn：悬停{
/*-----文本------*/
颜色：白色；
/*-----造型------*/
光标：指针；
/*----变换