Vimeo embedding as background but works on mobile

You get a request. They want video (Vimeo) to run nicely in the background but also want it to run nicely on mobile devices.

It is quite easy if you can focus on only desktop but in reality they want to see on mobile as well.

If you set the parameter background true, the video plays in the background, no sound, autoplay and it loops forever. Nice. However, because of the parameter, the video won't play even it is trigger to play. You need another iframe without background parameter, or set it false.

You don't want to write 2 almost identical iframes just for that.

All you need to do is to instantiate api dynamically in JS, not in HTML then also apply options as a set of parameters so that the page won't need to load two iframes.

(function() {
	//video script starts
	var videoContainerDesktop = document.getElementById('iframeForDesktop'),
		videoContainerMobile = document.getElementById('reit-vimeo-vid'),
		videoThumbnail = document.getElementById('reit-vimeo_play_v_2017'),
		player,
		options = {
			id: xxxxxxxx,//replace with your video id
			loop: false,
			autoplay: false,
			byline: false,
			background: true,
			title: false
		};

	isMobile() ? setForMobile() : setForDesktop();

	function setForDesktop() {
		player = new Vimeo.Player(videoContainerDesktop, options);
	}

	function setForMobile() {
		//set background false on mobile otherwise won't play
		options.background = false;
		options.api = false;
		//then instantiate
		player = new Vimeo.Player(videoContainerMobile, options);

		videoContainerDesktop.style.display = 'none';
		videoThumbnail.style.display = 'block';

		videoThumbnail.addEventListener('click', function() {
			playVideo();
		}, false);
	}

	function playVideo() {
		player.play();
		hideThumbnail();
	}

	function hideThumbnail() {
		videoThumbnail.style.display = 'none';
		videoContainerMobile.style.display = 'block';
	}

	function showThumbnail() {
		videoThumbnail.style.display = 'block';
		videoContainerMobile.style.display = 'none';
	}

	// player.on('ended', showThumbnail); //mystery: 'ended' doesn't work on production
	player.on('finish', showThumbnail);
}());

One thing to add: Event 'ended' is not working on production (it somehow works in local environment though). Instead 'finish' works even it's not on official documentation. They need to fix it. Vimeo Player Doc

Cleaner Version

(function() {
  //video script ->
  var videoContainerDesktop = document.getElementById('iframeForDesktop'),
    videoContainerMobile = document.getElementById('reit-vimeo-vid'),
    videoThumbnail = document.getElementById('reit-vimeo_play_v_2017'),
    player,
    options;

  isMobile() ? init(videoContainerMobile) : init(videoContainerDesktop);
        
  function init(el) {
    //set default parameters
    options = {
      id: xxxxxxxx,//replace with your video id
      //choose to use id or url
      //url: 'https://vimeo.com/video/xxxxxxxx',
      loop: false,
      autoplay: false,
      byline: false,
      background: true,
      title: false
    };

    if(el === videoContainerMobile) {
      //set background false on mobile or video won't play
      options.background = false;
      setViewForMobile();
    }
    //instantiate player with custom parameters
    player = new Vimeo.Player(el, options);
  }

  videoThumbnail.addEventListener('click', function() {
    setViewVideoStart();
    player.play();
  }, false);

  function setViewForMobile() {
    videoThumbnail.style.display = 'block';
    videoContainerDesktop.style.display = 'none';
  }

  function setViewVideoStart() {
    videoThumbnail.style.display = 'none';
    videoContainerMobile.style.display = 'block';
  }

  function setViewVideoEnd() {
    videoThumbnail.style.display = 'block';
    videoContainerMobile.style.display = 'none';
  }

  // player.on('ended', setViewVideoEnd); //mystery: 'ended' doesn't work on production
  player.on('finish', setViewVideoEnd);
  player.on('pause', setViewVideoEnd);
  //<- video script
}());