Lay Theme Forum

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

    Video is played differently

    Bug Reports
    2
    4
    24
    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.
    • T
      Tower92 last edited by

      Hey,
      I have integrated a video into my website via html. With the help of Javascript, the video appears from a certain height and disappears again after a certain height. If I access the website via www.noals.de, everything works as it should. But when I go to Contacts, for example, and then back to the Home page via the Site title, the video is permanently there.
      What could be the reason for this?

      My Website

      My code:

      Custom CSS for Desktop Version

      #fixed-video {
          position: fixed;
          top: 55%;
          left: 62%;
          transform: translate(-50%, -50%);
      }
      
      

      Custom <head> content

      <script>
      jQuery(document).ready(function($) {
          var $window = $(window),
              $fixedVideo = $('#fixed-video'),
              videoHeight = $fixedVideo.outerHeight(),
              showAtHeight = 500,
              hideAtHeight = 1850;
      
          $fixedVideo.hide();
      
          $window.scroll(function() {
              var scrollTop = $window.scrollTop();
      
              if (scrollTop > showAtHeight && scrollTop < hideAtHeight) {
                  $fixedVideo.fadeIn();
              } else {
                  $fixedVideo.fadeOut();
              }
          });
      });
      
       </script>
      

      Thanks in advance!

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

        <script>
        var $fixedVideo;
        var showAtHeight = 500;
        var hideAtHeight = 1850;
        var videoHeight;
        
        jQuery(document).ready(function($) {
            $fixedVideo = jQuery('#fixed-video')
            videoHeight = $fixedVideo.outerHeight();
        });
        
        jQuery(window).on('scroll', (function() {
            var scrollTop = window.scrollY;
        
            if (scrollTop > showAtHeight && scrollTop < hideAtHeight) {
                $fixedVideo.fadeIn();
            } else {
                $fixedVideo.fadeOut();
            }
        });
        
        jQuery(window).on('resize', function(){
            videoHeight = $fixedVideo.outerHeight();
        });
        
        window.laytheme.on('newpageshown', function(){
            $fixedVideo.hide();
        });
        </script>
        

        the reason it didnt work, jQuery(document).ready(function($) { is only triggered once!
        read here: https://laytheme.com/documentation/custom-javascript.html

        T 1 Reply Last reply Reply Quote 0
        • T
          Tower92 @arminunruh last edited by

          @arminunruh Thanks for your reply and sorry for my late reply.

          I implemented the code you provided. The video is displayed the whole time. I think I understood the content within the link you provided but I cannot figure out a solution.

          1 Reply Last reply Reply Quote 0
          • T
            Tower92 last edited by

            Got it it worked out! Topic can be closed!
            Thanks!

            1 Reply Last reply Reply Quote 1
            • First post
              Last post
            Post a link to where the problem is
            I don't answer or check forum DMs, please just post on the forum.
            Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

            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

            Recent Topics

            • H

              sumbmenu on mobile device

            • Q

              backdrop blur on ios

            • While editing the carousel, the images are not displayed correctly

            • Sticky Footer now has Background

            laytheme.com