CODEWITHSUNDEEP
javascriptjqueryfullpage.js
Thomas
Thomas

Reputation: 107

Fullpage.js - video & page resizing issues

I'm using fullpage.js and I'm having a problem with the onloadedmeta function that resizes my background video.

It works perfectly when accessing the page URL directly including the section id with the video. That is to say it resizes to take up the entire screen.

If the section id I'm trying to access is not the section with the background video I see the below error - in this scenario the video resizes correctly but the remaining pages are 144px out from the top (this error fixes itself when I then go to scroll through sections).

Error: Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

When I refresh the page using any section id other than the section id that contains the background video the above error is not thrown and the pages resize correctly - but the video does not. The video is just the default size.

I haven't actually noticed this problem previously and some of the aforementioned issues do seem somewhat sporadic. Today I've been created the footer (which contains no JS) and adjusted my mobile menu a little but nothing different to what it was in terms of JS.

I've pasted the JS file below - as you'll see I'm using Fullpage in conjunction with Smoothstate.

If anyone has any suggestions or feedback I'd be eternally grateful.

Thanks very much in advance for your time,

Kind regards

Tom

Edit: all works perfectly if I remove the video from the section

( function( $ ) {
  function addFullPage() {

    if( $( 'html' ).hasClass( 'fp-enabled' ) ) {
      $.fn.fullpage.destroy( 'all' ); // uninitialise fullpage
    }

    $( '#fullpage' ).fullpage( {
      anchors: [ '2d', '3d', 'character','motionandgraphics', 'vfx', 'footer' ],
      scrollOverflow: false,
      fixedElements: '#masthead',
      afterLoad: function( anchorLink, index ) {
        if( index == 1 ) {
          console.log( 'afterload function' );
          $( '#video' ).get( 0 ).play();
        }
      }
    } );

    $( '#section0 video' ).on( 'loadedmetadata', function() {

      console.log( 'onloadedmetadata function' );

      var $width, $height, // Width and height of screen
       $vidwidth = this.videoWidth, // Width of video (actual width)
       $vidheight = this.videoHeight, // Height of video (actual height)
       $aspectRatio = $vidwidth / $vidheight; // The ratio the video's height and width are in

      ( adjSize = function() { // Create function called adjSize
        $width = $( window ).width(); // Width of the screen
        $height = $( window ).height(); // Height of the screen

        $boxRatio = $width / $height; // The ratio the screen is in

        $adjRatio = $aspectRatio / $boxRatio; // The ratio of the video divided by the screen size

        // Set the container to be the width and height of the screen
        $( '#section0' ).css( { 'width' : $width+'px', 'height' : $height+'px' } );

        if( $boxRatio < $aspectRatio ) { // If the screen ratio is less than the aspect ratio..
          // Set the width of the video to the screen size multiplied by $adjRatio
          $vid = $( '#section0 video' ).css( { 'width' : $width*$adjRatio+'px' } );
        } else {
          // Else just set the video to the width of the screen/container
          $vid = $( '#section0 video' ).css( { 'width' : $width+'px' } );
        }

      } )(); // Run function immediately

     // Run function also on window resize.
     $( window ).resize( adjSize );

    } );

    function iedetect( v ) {
      var r = RegExp( 'msie' + ( !isNaN(v) ? ( '\\s' + v ) : '' ), 'i' );
      return r.test( navigator.userAgent );
    }

  }

  $( document ).ready( function(){
    addFullPage();
    console.log( 'document ready function' );
    mobMenu();
  } );

  function addBlacklistClass() {

    $( 'a' ).each( function() {
      if ( this.href.indexOf( '/wp-admin/' ) !== -1 || this.href.indexOf( '/wp-login.php' ) !== -1 ) {
        $( this ).addClass( 'wp-link' );
      }
    } );

  }

$( function() {

    addBlacklistClass();

    var settings = {
      anchors: 'a',
      blacklist: '.wp-link',
      onStart: {
        duration: 1000,
        render: function ( $container ) {
          $( '#content' ).addClass( 'fade-out' );
        }
      },
      onAfter: function( $container ) {

        addFullPage();
        console.log( 'on after function in smoothstate' );
        mobMenu();

        $( '#content' ).removeClass( 'fade-out' );

        var $hash = $( window.location.hash );

        if ( $hash.length !== 0 ) {
          var offsetTop = $hash.offset().top;
          $( 'body, html' ).animate( {
            scrollTop: ( offsetTop - 60 ),
          }, {
            duration: 280
          } );
        }

      }
    };

    $( '#page' ).smoothState( settings );

  } );

} )( jQuery );

Upvotes: 1

Views: 961

Answers (1)

Thomas
Thomas

Reputation: 107

Ultimately the cleanest solution for me was to simply use CSS to resize the video rather than JQuery. I'm also relying on the built-in functionality of Fullpage.js to play/pause the video as it goes in and out of the viewport rather than trying to manipulate it myself.

The DOM play() exception is still thrown but after much testing it doesn't seem as though it's causing any harm on the front-end.

 #fullpage .section video { position:absolute; top:0; left:0; width:100%; height:100%; display:none; }

@media ( min-aspect-ratio:16/9 ) {
  #fullpage .section video { width:100%; height:auto; }
}

@media ( max-aspect-ratio:16/9 ) {
  #fullpage .section video { width:auto; height:100%; }
}

Upvotes: 1

Related Questions