How to Enable Picture in Picture Video Mode Upon Scrolling on Elementor?

Question

I am doing a site for a client and their page builder is in Elementor. He requested a Picture-In-Picture Mode upon scrolling..

they want to achieve like this; Here's a sample of PiP upon scrolling: https://bitly.ws/36hIz

I need to do similar but with Elementor Wordpress

Thanks again

===================================================================

Answer 1

You can achieve Picture-In-Picture Mode upon scrolling with Elementor Wordpress by following this steps.

Step 1: ( as per this link https://bitly.ws/36hIz ) copy this code. In your elementor page take a widget named HTML and paste this inside that widget. As you can watch in image

<!-- Styles for the picture-in-picture plugin -->
<link href="//players.brightcove.net/videojs-pip/1/videojs-pip.css" rel="stylesheet">

<!-- Container to hold the text and video player -->
<div class="wrap">
  <h1>Picture-in-Picture Plugin</h1>
  <p>
    After starting video playback, scroll down the page to cause the player to jump out of the content, but not cause the content to re-flow. Scrolling room is available both vertically and horizontally.
  </p>
  
  <!-- The picture-in-picture container. This is required! -->
  <div class="vjs-pip-container">
    <!-- The player embed code -->
    <video-js id="myPlayerID" 
              data-account="1752604059001"
              data-player="Zbggd6KGf" 
              data-embed="default" 
              controls="" 
              
              data-playlist-id="" 
              data-application-id=""
              width="560" height="315"></video-js>
    <script src="https://players.brightcove.net/1752604059001/Zbggd6KGf_default/index.min.js"></script>
  </div>
  
  <p>
    Lorem ipsum dolor sit amet, lectus ac porttitor mauris sit nec cupidatat, lobortis tempor lacus dui id, sit amet, fringilla mi pharetra volutpat mauris. Urna in magnis neque nunc, varius suspendisse erat nullam nibh sed a, tincidunt scelerisque magnis ac tortor rutrum, eget lacus urna porta, cras vel. Enim commodo wisi bibendum ornare ullamcorper metus, mauris venenatis nulla neque suspendisse, orci odio officia, eget nunc aenean. 
  </p>
  <p>
    Posuere a pellentesque praesent wisi, pede feugiat lectus egestas eget, mattis condimentum elit, vivamus amet vestibulum egestas cras donec fusce, lectus at. Quisque torquent, nulla eros, et suscipit elit, gravida consequat diam cras turpis mauris nam. Vivamus varius amet cursus elit, possimus donec arcu luctus. Libero dapibus nunc sapien.
  </p>
</div>

<!-- Script for the picture-in-picture plugin -->
<script src="//players.brightcove.net/videojs-pip/2/videojs-pip.min.js"></script>

Step 2: Add this script into the footer ( or function file as per your convenient). You can take help if from here if you want.

    videojs.getPlayer('myPlayerID').ready(function() {
  // When the player is ready, get a reference to it
  var myPlayer = this;
    myPlayer.poster('full/path/to/your/image.jpg');
     myPlayer.src({
        src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
        type: 'video/mp4'
      });
  // Initialize the picture-in-picture plugin
  myPlayer.pip();
});

Step 3: After saving both step visit you page and you have achieve Picture-In-Picture Mode upon scrolling.

Working for me. ( https://prnt.sc/cthcmcpuT7RQ )

Hope it helps you!