【问题标题】:Background embed video from Youtube or Vimeo using Custom Field使用自定义字段从 Youtube 或 Vimeo 嵌入背景视频
【发布时间】:2021-09-23 01:04:38
【问题描述】:

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

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

这些可能吗?

到目前为止,这是我的代码:

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

【问题讨论】:

    标签: php css wordpress advanced-custom-fields


    【解决方案1】:

    您好@lei,根据您的代码,the_field 是您只是想从自定义字段中回显值。您应该使用 get_field 并在 iframe 中回显它。现在对于自动播放和自动播放,您只需在 iframe 中编写此代码 ?autoplay=1&amp;mute=1&amp;loop=1&amp;rel=0&amp;showinfo=0&amp;color=black&amp;iv_load_policy=3&amp;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 这太棒了。非常感谢您提供这些代码。
    猜你喜欢
    • 2014-04-04
    • 1970-01-01
    • 2019-02-12
    • 1970-01-01
    • 2016-02-14
    • 2018-01-24
    • 1970-01-01
    • 2014-11-06
    • 2016-09-07
    相关资源
    最近更新 更多