使用自定义字段从 Youtube 或 Vimeo 背景嵌入视频

Question

我正在为我的网站制作视频背景。我创建了一个自定义代码，使用“oEmbed”从 Youtube 和 Vimeo 嵌入 URL link。该过程运行良好，但我需要将背景视频设置为

自动播放 - 我添加了“?autoplay=1&mute=1”但它不起作用，此代码仅适用于 youtube link。
继续播放/或none停止播放
不显示控件

这些可能吗？

到目前为止，这是我的代码：

        <div class="embed-container">
            <?php $ctm_video_link = get_post_meta($post->ID, 'video_link', true);?>
                <?php if(empty($ctm_video_link)):?>
                    <?php else:?>
                      <?php the_field('video_link'); ?>?
                    <?php endif;?> 
        </div>


<style>
.embed-container { 
    position: relative; 
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 1

你好@lei，根据你的代码，the_field你只是想回显自定义字段中的值。您应该使用 get_field 并在 iframe 中回显它。现在对于自动播放和自动播放，您只需在 iframe 中编写此代码 ?autoplay=1&mute=1&loop=1&rel=0&showinfo=0&color=black&iv_load_policy=3&playlist=' . $youtube . 。

以下是您可以使用的示例代码：

               <?php
                  $youtube = get_field('video');
                   $vimeo = get_field('video');

                    if ('' !== strval($youtube)) {
                       echo '<iframe src="https://www.youtube.com/embed/' . $youtube . '?autoplay=1&mute=1&loop=1&rel=0&showinfo=0&color=black&iv_load_policy=3&playlist=' . $youtube . '"></iframe>';
                    }
                  ?>
              </div>

现在对于控制按钮，您可以通过 css 样式简单地调整 iframe。

   .embed-container { 
    position: relative; 
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
   /* height:  100%; */
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
    position: absolute;
    top: -64px;
    left: 0;
    width: 100%;
    height: 100%;
}

享受编码吧！ ^^

使用自定义字段从 Youtube 或 Vimeo 背景嵌入视频

Background embed video from Youtube or Vimeo using Custom Field

css

php

wordpress

advanced-custom-fields