因此,昨天我花了一整天的时间,试图在自定义wordpress页面模板中制作一个全幅响应的背景视频。
这是添加到着陆的bg视频代码。php(我未来的登录页)
<div class="fullscreen-bg">
<video loop muted autoplay poster="public_html/wp-content/themes/gt3-wp-pure/page-templates/landingvid.gif" class="fullscreen-bg__video">
<source src="public_html/wp-content/themes/gt3-wp-pure/page-templates/landingvid.webm" type="video/webm">
<source src="public_html/wp-content/themes/gt3-wp-pure/page-templates/landingvid.mp4" type="video/mp4">
</video>
我还包括
<base href="http://angeloconstantinou.com/" />
这就是主题。CSS处理视频:
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%;
}
}
@media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%;
}
}
@media (max-width: 767px) {
.fullscreen-bg {
background: url(\'../img/videoframe.jpg\') center center / cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}
}
下面是错误消息的屏幕截图,告诉我无法找到该文件。如果我遵循它试图从中提取文件的确切路径,我可以看到文件放在那里。(图2)
Things I have tried so far:
<移动着陆。php从页面模板文件夹中移出,将源文件移动到其他所有可能的目录中,使用基本URL重写来停止Wordpress在博客文章中的搜索(我想我是对的)
编写完整路径URL,而不是源src=\'landingvid。我不是这方面的专家,很可能我问错了问题。希望有人能够通过所有截图和片段提供帮助。网站和;有问题的页面是www.angeloconstantinou。通信/着陆。php-当我完成这项工作时,我会将其设置为静态首页,并带有一个按钮,该按钮将指向网站的常用首页/公文包菜单。