Background embed video from Youtube or Vimeo using Custom Field

Question

I am working with video background to my website. I created a custom code to embed the URL link from Youtube and Vimeo using the "oEmbed". the process is perfectly working fine, however I need to set my background video to

1. Autoplay - I added "?autoplay=1&mute=1" but it wont work, and this code is for youtube link only.
2. Continues Playing/ or none stop playing
3. Without showing controls

Are these possible?

here are my code so far:

        <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

Hi @lei as per your code, the_field is you just like to echo the value from the custom field. you should use get_field and echo it inside the iframe. now for the autoplay and auto playback you just simply write this code ?autoplay=1&mute=1&loop=1&rel=0&showinfo=0&color=black&iv_load_policy=3&playlist=' . $youtube . inside the iframe.

here are the sample code you can use:

               <?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>

Now for the control buttons, you can simply adjust the iframe through your css style.

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

Enjoy Coding! ^^