JSFiddle - React, Tailwind, and code Playground

HTML5 link video action

by tonytlwu

HTML

<button id="btn">Play video</button>

CSS

video {
  /* Maintains responsivenesss */
  max-width: 100%;
}

.ios8 video {
  /* Maintains aspect ratio for iOS 8 */
  height: auto;
}

video.video-hidden {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-transform: scale(0.0001) translate3d(0, 0, 0) !important;
  transform: scale(0.0001) translate3d(0, 0, 0) !important;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

</style> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>

JavaScript

// Keep track of the last touch point co-ordinate
window.flLastTouchPoint = {
  x: 0,
  y: 0
};

document.addEventListener('touchend', function(e) {
  // Update the last touch point co-ordinate
  flLastTouchPoint.x = e.changedTouches[0].clientX;
  flLastTouchPoint.y = e.changedTouches[0].clientY;
}, true);

function FLVideo(element) {
  var _this = this;

  this.video = element;

  return new Promise(function(resolve, reject) {
    _this.init()
      .then(function() {
        resolve(_this);
      });
  });
}

FLVideo.prototype = {

  handleEvent: function(event) {
    if (typeof(this[event.type]) === 'function') return this[event.type](event);
  },

  init: function() {
    var _this = this;
    return new Promise(function(resolve, reject) {
      _this.video.addEventListener('webkitfullscreenchange', this, false);
      _this.video.addEventListener('mozfullscreenchange', this, false);
      _this.video.addEventListener('fullscreenchange', this, false);
      _this.video.addEventListener('webkitendfullscreen', this, false);

      _this.video.style.top = flLastTouchPoint.y + 'px';
      _this.video.style.left = flLastTouchPoint.x + 'px';
      setTimeout(function() {
        setTimeout(resolve, 0);
      }, 0);
    });
  },

  webkitfullscreenchange: function(e) {
    this.fullscreenChanged(e);
  },
  mozfullscreenchange: function(e) {
    this.fullscreenChanged(e);
  },
  fullscreenchange: function(e) {
    this.fullscreenChanged(e);
  },

  fullscreenChanged: function(e) {
    var fullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    if (!fullscreen) {
    	// Exits fullscreen
      this.video.currentTime = 0;
      this.video.pause();
      // @TODO: Lock orientation
      // Fliplet.App.Orientation.lock();
      return;
    }
    // Enters fullscreen
    // @TODO: Unlcok orientation
    // Fliplet.App.Orientation.unlock();
    return;
  },

  webkitendfullscreen: function(e) {
    this.video.currentTime = 0;
   ...