通过使用add_filter()在WordPress中过滤内容来添加视频


Adding a video by filtering content in WordPress with add_filter()

我想添加一个视频到一个网站的主页。我已经创建了一个子主题,并使用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;
    }