如何在不使用插件的情况下使用HTML5将背景视频嵌入到Wordpress主题中？

Question

我正尝试在wordpress网站上添加一个背景视频，而不是目前的大图片。

我知道如何用HTML5和CSS设置视频，但对php不是很熟悉，当涉及到编写一个函数从媒体库中拉出视频(wmp和mp4)并显示它们时，我有点迷路了。

任何关于如何做到这一点的指导都将不胜感激。谢谢!

我知道这是代码中需要修改的部分：

<div class="intro-block">
    <?php if ( has_post_thumbnail() ):?>
        <?php the_post_thumbnail('full'); ?>
    <?php else: ?>
        <?php
            $image = get_field('global_intro_image', 'option');
            if( !empty($image) ): ?>
            <img src="<?php echo $image['url']; ?>" alt="<?php echo        $image['alt']; ?>" >
        <?php endif; ?>
        <?php endif; ?>
        <div class="text-holder">
        <div class="container">
            <?php if( $title = get_field( 'title' )) : ?>
                <h1><?php echo $title; ?></h1>
            <?php endif; ?>
            <?php if( $find_btn_link = get_field( 'find_btn_link' )) : ?>
                 <a href="<?php echo $find_btn_link; ?>" class="btn btn-blue white-border">    <?php echo get_field( 'find_btn_text' ); ?></a>
            <?php endif; ?>
        </div>
    </div>
</div>

它当前拉取页面的特色图像并显示它。

对于从哪里开始有什么建议吗？

提前感谢！

Answer 1

首先，您需要找出调用图像的是哪个部分。看起来像这个部分：

​

            if( !empty($image) ): ?>
            <img src="<?php echo $image['url']; ?>" alt="<?php echo        $image['alt']; ?>" >
        <?php endif; ?>

​

然后注释掉这一部分，或者只是删除这部分代码，并替换为视频标签和样式，使它看起来就像你需要的。

然后，如果你需要能够从wordpress后端指示视频，那么你需要创建选项页面/或只添加字段，如果你有主题选项页面。https://codex.wordpress.org/Creating_Options_Pages

更简单的是使用ACF pro创建选项页面