how to auto play a video on home screen

Solved

how to auto play a video on home screen

Andia
Tourist
61 0 2

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

 

is this possible on dawn theme?

Accepted Solutions (2)
Boki97
Shopify Partner
62 5 4

This is an 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
          }}

View solution in original post

Boki97
Shopify Partner
62 5 4

This is an 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>

View solution in original post

Replies 15 (15)

Boki97
Shopify Partner
62 5 4

Hi Andia,
You can do it like this:

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

 

Andia
Tourist
61 0 2

where does it go?

Andia
Tourist
61 0 2

Andia_0-1718700062647.png

 it has been added here. 

 

Dan-From-Ryviu
Shopify Partner
8479 1671 1683

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>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Andia
Tourist
61 0 2

www.andiacollective.com.au

 

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

Boki97
Shopify Partner
62 5 4

This is an 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
Tourist
61 0 2

Andia_0-1718701052949.png

 

doesnt seem to work here

 

Boki97
Shopify Partner
62 5 4

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

Andia
Tourist
61 0 2

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

 

Andia_0-1718703998355.png

 

Dan-From-Ryviu
Shopify Partner
8479 1671 1683

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

EBOOST
Shopify Partner
1042 279 315

Hi @Andia ,

May I suggest to update code these steps:

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

EBOOST_0-1718703921788.png

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>

EBOOST_1-1718703962428.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Andia
Tourist
61 0 2

how can i remove this:

 

Andia_0-1718704313511.png

 

Andia
Tourist
61 0 2

i also want to hide the controls on hover

 

Boki97
Shopify Partner
62 5 4

This is an 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
Tourist
61 0 2

thank you!!