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

Posted 2023-03-25

【中文标题】使用自定义字段从 Youtube 或 Vimeo 嵌入背景视频

【英文标题】：Background embed video from Youtube or Vimeo using Custom Field

【发布时间】：2021-09-23 01:04:38

【问题描述】：

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

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

这些可能吗？

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

        <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%;

【参考方案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%;

享受编码！ ^^

【讨论】：

OMG @Marvin 这太棒了。非常感谢您提供这些代码。