JSFiddle - React, Tailwind, and code Playground

by andyw_

HTML

<a class="youtube cboxElement" href="http://www.youtube.com/embed/csyL9EC0S0c">
    <img src="http://clarity.local/resources/uploads/files/articles/article_web.jpg" alt="">
            <i class="play"></i>
        </a>

JavaScript

;(function ( $, window ) {
    
  var pluginName = 'videoReplace';
  
  var regexMatchers = {
    
    'youtube' : [{
      'regex'   : /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/,
      'length' : 11,
      'idmatch' : 2
    }],
    
    'vimeo' : [{
      'regex' : /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/,
      'length' : null,
      'match' : 2
    }]
    
  };
  
  function getVideoDetails( url ) {
    for( var prop in regexMatchers ) {
      var regexs = regexMatchers[ prop ];
      
      for( var i = 0; i < regexs.length; i++ ) {
        var regex = regexs[ i ].regex,
            match = url.match(regex),
            matchNum = regexs[ i ].match,
            length = regexs[ i ].length;
            
        if( match && (length === null ? true : match.length == length) ) {
          
          return {
            'type'  : prop,
            'id'    : match[ matchNum ]
          };
        
        }        
      }
      
    }
    
    return false; //none found
    
  }
  
  function getEmbedUrl( videoDetail ) {
    if( !videoDetail ) {
      return;
    }
    
    var url = '';
    
    switch ( videoDetail.type ) {
      case 'youtube' :
        url = 'http://www.youtube.com/embed/';
        break;
      case 'vimeo' :
        url = 'http://player.vimeo.com/video/';
    }
    
    url =+ videoDetail.id;
    
    return url;
  }
  
  function videoReplace ( el, options ) {
    
    var
    
    $el = $(el), //jQuery wrapped element
    
    videoType = null,
    
    videoId = null,
    
    $iframe = null,
    
    defaults = {
      autoplay : false
    },
    
    settings = {};
    
    function getIframe() {
      if($iframe) {
        return $iframe;
      }
      
      var 
        iframe = document.createElement('iframe'),
        url = $el.prop('href'),
        videoDetails = getVideoDetails( url ),
        embedUrl = videoDetails ? getEmbedUrl( videoDetails ) : null;
        
      if( !embedUrl ) {
        return...