Sticky Video Player (Pinned Video)

When the Player disappears from the screen while scrolling, the video is being sticked to your browser (Sticky Video). The sticked Player can be placed anywhere on the site. Try it! Start the video and scroll down.

Player Demo (Sticky)


Depending on screen size (mobile, desktop) the Sticky Video scales to 30 respectively 60% of the screen.

sticky Parameter

While initializing the Player you can activate this function with sticky:true; or you pass a configuration object with further settings.


var  VideoPlayer =  new js3q({
        'data-id': 'c8dbe7f4-7f7f-11e6-a407-0cc47a188158',
        'container': 'player1',
        'sticky': true
 });
VideoPlayer.init();

Additional to the standard settings you can also change the position by editing CSS.


Find more examples for integration on our Github Site.

Browser-Support

 

HTML5Chrome 34+
Firefox Android 41+
Firefox Desktop 42+
IE11+ Windows 8.1+
Edge Windows 10+
Opera Desktop
Safari iOS (in development)
Flashnot supported

Some text for scrolling.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

By using our website, you agree to our privacy policy.