Solved

Video size and autoplay in Craft theme

havenmercantile
Visitor
2 0 0

I have embedded a video from YouTube on my online store. I want the video smaller and I want it to autoplay. I cannot figure out how to accomplish either. My theme is craft. Thank you!

Accepted Solution (1)

EBOOST
Shopify Partner
996 268 307

This is an accepted solution.

Hi @havenmercantile,

May I suggest to update code these steps:

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

EBOOST_1-1672356985580.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_0-1716175977330.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 ❤❤

View solution in original post

Replies 2 (2)

EBOOST
Shopify Partner
996 268 307

This is an accepted solution.

Hi @havenmercantile,

May I suggest to update code these steps:

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

EBOOST_1-1672356985580.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_0-1716175977330.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 ❤❤
havenmercantile
Visitor
2 0 0

You are awesome. Thank you so much!