Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Random Video Backgrounds on Homepage

    General Discussion
    6
    13
    530
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      spontans last edited by

      Hi Marius,

      I'm trying to set a video background for my homepage that will play a random video each time.

      My temporary website url: http://82.80.209.62/~cleanpla/sasha2017

      I've added a video background via the gridder, and I run this script each time the homepage loads:

      if($("body").hasClass("slug-home2")) {
      var videosrc = Math.floor(Math.random() * 6) + 1;
      var homeurl = 'http://82.80.209.62/~cleanpla/sasha2017/videobg/';
      videopath = homeurl+videosrc+'.mp4';
      $('video').attr('preload', videopath);
      $('video source').attr('src', videopath);
      }

      uder the:
      Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){}
      event.

      Everything works smooth and fast in Chrome, but in Safari there is usually a long lag with showing and starting a video (when going back to homepage from Info/Shop/Works page.

      Is there anything I can do to preload the videos faster in safari? or maybe there is a problem with my script or the event that I'm launching it at?

      Thanks in advance for any help.

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Hi Spontans,

        Your script looks fine to me. But give me a day to check and I will get back to you.

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • S
          spontans last edited by

          Thank you Marius, I love you!

          1 Reply Last reply Reply Quote 1
          • arminunruh
            arminunruh Global Moderator last edited by

            Hey spontanus

            <video data-ar="0.75" preload="http://82.80.209.62/~cleanpla/sasha2017/videobg/3.mp4" muted="" autoplay="" loop=""><source src="http://82.80.209.62/~cleanpla/sasha2017/videobg/3.mp4" type="video/mp4"></video>

            Not sure if preload="yoururl" is valid html. Maybe try just preload without ="yoururl"

            1 Reply Last reply Reply Quote 0
            • S
              spontans last edited by

              ok, so the following steps are what i need to do?

              1. disable the video background feature
              2. insert this this html in gridder (maybe with some really light, 1 sec video..)
              3. change the preload and source attributes with my randomizer script on "newpageshown"
              1 Reply Last reply Reply Quote 0
              • arminunruh
                arminunruh Global Moderator last edited by

                No, just remove this line from your javascript:

                $('video').attr('preload', videopath);

                Maybe that helps!

                1 Reply Last reply Reply Quote 0
                • S
                  silviu last edited by

                  @spontans said in Random Video Backgrounds on Homepage:

                  Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj)

                  hi/
                  how will you approach this in 2020 ?
                  i want to have the same , a script the randomly loads a video for the background page.
                  the page i'm working on is http://telegraf.studio /
                  thank you /

                  1 Reply Last reply Reply Quote 0
                  • mariusjopen
                    mariusjopen Global Moderator last edited by

                    Dear @silviu
                    does the solution not work?

                    Best!

                    Marius

                    www.mariusjopen.world

                    S 1 Reply Last reply Reply Quote 0
                    • S
                      silviu @mariusjopen last edited by

                      hey @mariusjopen ~ thanks for replying

                      i'm a total noob when it comes to web / wordpress environment , so please excuse if i'm missing something obvious .
                      so what i understand from @spontans code , applied to my project is this

                      if($("body").hasClass("slug-welcome")) {
                      var videosrc = Math.floor(Math.random() * 2) + 1;
                      var homeurl = 'http://telegraf.studio/wp-content/uploads/2020/02/'';
                      videopath = homeurl+videosrc+'.mp4';
                      $('video source').attr('src', videopath);
                      }

                      i've modified the slug-home2 on the first line to my page name : slug-welcome
                      the math.floor is modified from 6 to 2 , in my case i would like to have just 2 movies in the folder
                      the path is also changed to my media folder that contains the movies.

                      should i also modify $ to JQuery ?

                      where do i place this code ? i've read about custom css/html , but just adding this to custom html head dose not
                      work .

                      thanks

                      1 Reply Last reply Reply Quote 0
                      • mariusjopen
                        mariusjopen Global Moderator last edited by

                        Dear @silviu

                        should i also modify $ to JQuery ?
                        This is correct.

                        http://laytheme.com/documentation.html#custom-javascript

                        Try that!

                        Best!

                        Marius

                        www.mariusjopen.world

                        1 Reply Last reply Reply Quote 0
                        • K
                          Knudsn last edited by

                          @silviu said in Random Video Backgrounds on Homepage:

                          hey @mariusjopen ~ thanks for replying

                          i'm a total noob when it comes to web / wordpress environment , so please excuse if i'm missing something obvious .
                          so what i understand from @spontans code , applied to my project is this

                          if($("body").hasClass("slug-welcome")) {
                          var videosrc = Math.floor(Math.random() * 2) + 1;
                          var homeurl = 'http://telegraf.studio/wp-content/uploads/2020/02/'';
                          videopath = homeurl+videosrc+'.mp4';
                          $('video source').attr('src', videopath);
                          }

                          i've modified the slug-home2 on the first line to my page name : slug-welcome
                          the math.floor is modified from 6 to 2 , in my case i would like to have just 2 movies in the folder
                          the path is also changed to my media folder that contains the movies.

                          should i also modify $ to JQuery ?

                          where do i place this code ? i've read about custom css/html , but just adding this to custom html head dose not
                          work .

                          thanks

                          Hey Silviu
                          Did you solve it?

                          I'm trying to get the above to work, but it seems like I'm missing something.

                          <script>
                          Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj) {
                          if(JQuery("body").hasClass("slug-home")) {
                          var videosrc = Math.floor(Math.random() * 3) + 1;
                          var homeurl = 'http://hidden.com/wp-content/uploads/'2020/09/';
                          videopath = homeurl+videosrc+'.mp4';
                          JQuery('video source').attr('src', videopath);
                          }
                          });
                          </script>

                          Best,
                          Christian

                          1 Reply Last reply Reply Quote 0
                          • Richard
                            Richard Global Moderator last edited by

                            Dear Christian @Knudsn

                            Use @silviu in order to make sure silviu was notified :)

                            Best of Luck
                            Richard

                            1 Reply Last reply Reply Quote 0
                            • K
                              Knudsn last edited by

                              Thanks @Richard-Keith!
                              Fingers crossed

                              1 Reply Last reply Reply Quote 0
                              • First post
                                Last post

                              I don't answer or check forum DMs, please just post on the forum.

                              Try this to fix issues before you post:

                              Use the Search Feature. Maybe there is already a solution to your issue.

                              1. Update Lay Theme and all Lay Theme Addons
                              2. Disable all Plugins
                              3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                              4. Now see if your problem solved itself
                              5. Go here, see if your problem is listed here:
                              Troubleshooting

                              When you post:
                              1. Post a link to where the problem is
                              2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                              Thanks!

                              Online Users

                              E
                              M
                              C
                              M
                              S

                              Recent Topics

                              • T

                                thumbnail grid categories fixed.

                              • L

                                BLEND MODE ON MOBILE

                              • A

                                A modal/pop up window displaying extra info

                              • Carousel is not showing

                              laytheme.com