我想添加一个视频到一个网站的主页。我已经创建了一个子主题,并使用add_filter()将内容过滤到主页。问题是视频正在播放,但之前播放的其他内容都不会显示。
如何让视频加上原始内容显示?
下面是我添加到functions.php的代码;
add_filter('the_content', 'spd_video');
function spd_video ($content){
if(is_front_page()){
$content = '<div class="fullscreen-bg">
<video loop muted autoplay poster="wp-content/uploads/2016/10/I_Waited_VA_Logo.png" class="fullscreen-bg__video">
<source src="wp-content/uploads/2016/07/I_Watied_VA_Video_1_Long_01.webm" type="video/webm">
<source src="wp-content/uploads/2016/07/I-Watied-VA-Video-1-Long.mp4" type="video/mp4">
</video>
</div>';
}
return $content;
}
?>
CSS
.fullscreen-bg {
position: relative;
top: 104px;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media (max-width: 767px) {
.fullscreen-bg {
background: url('http://iwaitedva.com/wp-content/uploads/2016/10/I_Waited_VA_Logo.png') center center / cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}
}
您完全用视频替换了内容,而不是将视频附加到内容中。我会这样做,这取决于你想把视频放在哪里,在内容的顶部还是底部。所以真的是$video。美元内容. .或内容。美元视频
add_filter('the_content', 'spd_video');
function spd_video ($content){
if(is_front_page()){
$video = '<div class="fullscreen-bg">
<video loop muted autoplay poster="wp-content/uploads/2016/10/I_Waited_VA_Logo.png" class="fullscreen-bg__video">
<source src="wp-content/uploads/2016/07/I_Watied_VA_Video_1_Long_01.webm" type="video/webm">
<source src="wp-content/uploads/2016/07/I-Watied-VA-Video-1-Long.mp4" type="video/mp4">
</video>
</div>';
$content = $video . $content;
}
return $content;
}