Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. Bug Reports
  3. Video is played differently

Video is played differently

Scheduled Pinned Locked Moved Bug Reports
4 Posts 2 Posters 88 Views
  • 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 Offline
    T Offline
    Tower92
    wrote on last edited by
    #1

    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
    0
    • arminunruhA Offline
      arminunruhA Offline
      arminunruh
      Global Moderator
      wrote on last edited by arminunruh
      #2
      <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
      0
      • arminunruhA 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 Offline
        T Offline
        Tower92
        wrote on last edited by
        #3

        @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
        0
        • T Offline
          T Offline
          Tower92
          wrote on last edited by
          #4

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

          1 Reply Last reply
          1
          Reply
          • Reply as topic
          Log in to reply
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes


          I also code custom websites or custom Lay features.
          šŸ’æ Email me here: šŸ’æ
          info@laytheme.com

          Before you post:
          1. When using a WordPress Cache plugin, disable it or clear your cache.
          2. Update Lay Theme and all Lay Theme Addons
          3. Disable all Plugins
          4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

          This often solves issues you might run into

          When you post:
          1. Post a link to where the problem is
          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
          Online Users
          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
          laytheme.com
          • Login

          • Don't have an account? Register

          • Login or register to search.
          • First post
            Last post
          0
          • Recent
          • Tags
          • Popular
          • Users
          • Search