how to auto play a video on home screen

[Andia]

id like for the home screen to auto play the video without the consumer having to press play.

is this possible on dawn theme?

[Boki97 · Accepted solution]

Updtade this on live 106 in video section

{{
            section.settings.video
            | video_tag:
              image_size: '1100x',
              autoplay: true,
              loop: section.settings.enable_video_looping,
              controls: true,
              muted: true
          }}

[Boki97]

Hi Andia,
You can do it like this:

<video autoplay muted>
  <source src="movie.mp4" type="video/mp4">
</video>

[Andia]

where does it go?

[Andia]

 it has been added here. 

[Dan-From-Ryviu]

Hi @Andia 

You can try to add this code to your theme.liquid file, before </body> to check

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Wait for the entire page to load
    window.onload = function() {
        // Find the button by ID
        var button = document.getElementById('Deferred-Poster-Modal-39126588358970');
        // Check if the button exists
        if (button) {
            // Click the button
            button.click();
        }
    };
});
</script>

[Andia]

www.andiacollective.com.au

doesnt quite work. opens to a black screen vs the video

[Boki97 · Accepted solution]

Updtade this on live 106 in video section

{{
            section.settings.video
            | video_tag:
              image_size: '1100x',
              autoplay: true,
              loop: section.settings.enable_video_looping,
              controls: true,
              muted: true
          }}

[Andia]

doesnt seem to work here

[Boki97]

No, You need to go in themes codes, under sections you need to find video and under line 106 change code.

[Andia]

oh amazing!! is there a way i can remove this

[Dan-From-Ryviu]

It doesn't work on Chrome but it works on Firefox and Safari 😞

[prafullgrowth]

not working

[fhdt7676]

i also trying but its not working to run it into auto mode on home screen.

[EBOOST]

Hi @Andia ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. sections/video.liquid

3. Add code below to top of file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script>
      $(document).ready(function(){
          if($('.video-section__poster').length > 0){
              $(".video-section__poster").click();
              $(".video-section video").on("loadeddata", function() {
                  var video =  $(" .video-section video").get(0);
                  video.play();
              });
          }
      });
  </script>

[Andia]

how can i remove this:

[Andia]

i also want to hide the controls on hover

[Boki97 · Accepted solution]

To remove controls paste this instead:

{{
            section.settings.video
            | video_tag:
              image_size: '1100x',
              autoplay: true,
              loop: section.settings.enable_video_looping,
              controls: false,
              muted: true
          }}

Also to remove play button, on top of section on first line add this:

<style>
span.deferred-media__poster-button.motion-reduce {
    display: none !important;
}
</style>

[Andia]

thank you!!

[prafullgrowth]

where I need to put this code?