Auto Pause Video Slider
using Vimeo

Video keeps playing with sound when you change slides? Adding this script will play video on the active slide and pause ones on the others.



Vimeo Slide 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.



Vimeo Slide 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Prerequisites

Vimeo Player.js

Vimeo's player.js is required for pause and play functionality.

Video embed iFrame

Copy iFrame tag from Vimeo embed options:

Use Cases

With Static Slider

Perfect when you know there are not going to be frequent updates to the videos.

Use Static Setup

With CMS Slider

Pixeto's Vimeo Slider combines with Finsweet's Dynamic Slider to deliver a CMS powered solution.

Use CMS Setup

Setup

Vimeo's player.js is required for the Vimeo player to function.

1. Add this Vimeo Player.js CDN before closing /body tag

	
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vimeo-player/2.13.0/player.min.js"></script>

2. Add this Code before closing /body tag

	
   <script>
   
   class VimeoVideo{
    constructor({videoElement, videoElementWrapper, thumbnail, videoObjects}){
      this.videoObjects = videoObjects
      //Getting Elements
      this.video = {
        element: videoElement,
        wrapper: videoElementWrapper,
        thumbnail: thumbnail,
      }
      //Creating video object
      this.createVimeoObject()

      if(this.video.thumbnail != null){
        //Adding EventListener to Thumbnail
        this.createEventListener()
      }

      //Adding Observer to Slide
      this.createObserver()
    }

    createEventListener(){
      this.video.wrapper.addEventListener('click', this.playVideo.bind(this))
    }

    playVideo(event){
      //Getting thumbnail element
      this.thumbnail = this.video.wrapper.querySelector(this.video.thumbnail)

      if (event.composedPath().includes(this.thumbnail)) {
        // Pausing all other videos
        this.videoObjects.forEach((item) => {
          item.video.VimeoObject.pause()
        })
        //Playing video on thumbnail click and hiding thumbnail
        this.video.VimeoObject.play()
        this.thumbnail.style.display = 'none'
      }
    }

    createVimeoObject(){
      //Getting Vimeo Video Id from iframe URL
      this.url = new URL(this.video.element.src)
      this.reg = /[0-9]\d+/g
      this.id = this.reg.exec(this.url.pathname)

      //Instantiating Vimeo player
      this.video.VimeoObject = new Vimeo.Player(this.video.element, {
        id: this.id[0],
      })
    }

    createObserver(){
      this.observer = new MutationObserver(entries=>{
        entries.forEach(entry=>{
          if(!entry.target.hasAttribute('aria-hidden')){
            //this.video.VimeoObject.play()
          }
          else if(entry.target.hasAttribute('aria-hidden')){
            //Pausing video when slide is out of view
            this.video.VimeoObject.pause()
          }
        })
      })
      //Calling Observer
      this.observer.observe(this.video.wrapper, {attributes: true})
    }
  }
   </script>

	
   <script>
      new VimeoSlider({
        slider: '[slider=vimeo]',
        thumbnail: '.vimeo_thumbnail_wrapper',
      })
   </script>

How to use

There are two options in the calling function of the slider. You can change these options to select your Slider and Thumbnail elements.

	
    new VimeoSlider({
      slider: '[slider=vimeo]',
      thumbnail: '.vimeo_thumbnail_wrapper',
    })

slider:

Add slider=vimeo attribute to your Slider.

You can use class and ID as well:
Use '.your_slider_class' to select using class
Use '#your_slider_ID' to select using ID

thumbnail:

If using a custom thumbnail, replace with the class of your thumbnail element. (It can be a div, image or anything)

Script will hide this element when user clicks and start playing the video.

CMS Powered Vimeo Slider



Vimeo Slide 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

CMS Setup

Copy numeric video id from the URL

Create a CMS field and populate all of the IDs

Place newly created CMS field at the end of ".../video/" in the the iFrame

Setup

Vimeo's player.js is required for the Vimeo player to function.

1. Add this Vimeo Player.js CDN before closing /body tag

	
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vimeo-player/2.13.0/player.min.js"></script>

2. Add this Code before closing /body tag

	
   <script>
   
   class VimeoVideo{
    constructor({videoElement, videoElementWrapper, thumbnail, videoObjects}){
      this.videoObjects = videoObjects
      //Getting Elements
      this.video = {
        element: videoElement,
        wrapper: videoElementWrapper,
        thumbnail: thumbnail,
      }
      //Creating video object
      this.createVimeoObject()

      if(this.video.thumbnail != null){
        //Adding EventListener to Thumbnail
        this.createEventListener()
      }

      //Adding Observer to Slide
      this.createObserver()
    }

    createEventListener(){
      this.video.wrapper.addEventListener('click', this.playVideo.bind(this))
    }

    playVideo(event){
      //Getting thumbnail element
      this.thumbnail = this.video.wrapper.querySelector(this.video.thumbnail)

      if (event.composedPath().includes(this.thumbnail)) {
        // Pausing all other videos
        this.videoObjects.forEach((item) => {
          item.video.VimeoObject.pause()
        })
        //Playing video on thumbnail click and hiding thumbnail
        this.video.VimeoObject.play()
        this.thumbnail.style.display = 'none'
      }
    }

    createVimeoObject(){
      //Getting Vimeo Video Id from iframe URL
      this.url = new URL(this.video.element.src)
      this.reg = /[0-9]\d+/g
      this.id = this.reg.exec(this.url.pathname)

      //Instantiating Vimeo player
      this.video.VimeoObject = new Vimeo.Player(this.video.element, {
        id: this.id[0],
      })
    }

    createObserver(){
      this.observer = new MutationObserver(entries=>{
        entries.forEach(entry=>{
          if(!entry.target.hasAttribute('aria-hidden')){
            //this.video.VimeoObject.play()
          }
          else if(entry.target.hasAttribute('aria-hidden')){
            //Pausing video when slide is out of view
            this.video.VimeoObject.pause()
          }
        })
      })
      //Calling Observer
      this.observer.observe(this.video.wrapper, {attributes: true})
    }
  }
   </script>

	
   <script>
     setTimeout(()=>{
       new VimeoSlider({
         slider: '[slider=vimeo]',
         thumbnail: '.vimeo_thumbnail_wrapper',
       })
     },1000)
   </script>

How to use

There are two options in the calling function of the slider. You can change these options to select your Slider and Thumbnail elements.

	
   <script>
     setTimeout(()=>{
       new VimeoSlider({
         slider: '[slider=vimeo]',
         thumbnail: '.vimeo_thumbnail_wrapper',
       })
     },1000)
   </script>

slider:

Add slider=vimeo attribute to your Slider.

You can use class and ID as well:
Use '.your_slider_class' to select using class
Use '#your_slider_ID' to select using ID

thumbnail:

If using a custom thumbnail, replace with the class of your thumbnail element. (It can be a div, image or anything)

Script will hide this element when user clicks and start playing the video.

Auto Pause Video Slider
using Vimeo

Vimeo Slide 1

Vimeo Slide 2

Prerequisites

Vimeo Player.js

Video embed iFrame

Use Cases

With Static Slider

With CMS Slider

Setup

1. Add this Vimeo Player.js CDN before closing /body tag

2. Add this Code before closing /body tag

How to use

slider:

thumbnail:

CMS Powered Vimeo Slider

Vimeo Slide 1

CMS Setup

Sci Fi Cyberpunk - VHS [Synthwave/Electro]

Oceandrive 🌴 Synthwave (No Copyright Music)

Setup

1. Add this Vimeo Player.js CDN before closing /body tag

2. Add this Code before closing /body tag

How to use

slider:

thumbnail:

Auto Pause Video Slider using Vimeo

Vimeo Slide 1

Vimeo Slide 2

Prerequisites

Vimeo Player.js

Video embed iFrame

Use Cases

With Static Slider

With CMS Slider

Setup

1. Add this Vimeo Player.js CDN before closing /body tag

2. Add this Code before closing /body tag

How to use

slider:

thumbnail:

CMS Powered Vimeo Slider

Vimeo Slide 1

CMS Setup

Sci Fi Cyberpunk - VHS [Synthwave/Electro]

Oceandrive 🌴 Synthwave (No Copyright Music)

Setup

1. Add this Vimeo Player.js CDN before closing /body tag

2. Add this Code before closing /body tag

How to use

slider:

thumbnail:

Auto Pause Video Slider
using Vimeo