Auto Show A Video Modal

show-video.js

// Immediately Invoked Function
$(function() {
    let url = window.location.href
    let extracted = url.slice(url.indexOf('#') + 1)
    let isPresent = /review/.test(extracted)
    
    if (isPresent) {
      let customer, videoUrl, websiteUrl
      
      extracted = extracted.slice(extracted.indexOf('-') + 1)
      extracted = $('.' + extracted)
      customer = extracted.closest('.vid-button').attr('data-customer')
      videoUrl = extracted.closest('.vid-button').attr('data-video')
      websiteUrl = extracted.closest('.vid-button').attr('data-website')

      displayVideo(customer, videoUrl, websiteUrl)
    }
  })
  
  // Listen for button clicks
  $('.vid-button').click(function() {
    const customer = $(this).attr('data-customer')
    const videoUrl = $(this).attr('data-video')
    const websiteUrl = $(this).attr('data-website')

    displayVideo(customer, videoUrl, websiteUrl)
  })

  function displayVideo(customer, videoUrl, websiteUrl) {
    // Show Modal and insert empty iframe
    $('#mpopupBox').css('display', 'block')
    $('.mpopup-main').html(
      '<iframe id="iframez" width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>'
    )

    $('#slogan').append(
      '<p>See how Company Name is helping ' +
        customer +
        ' work better, faster and smarter</p>'
    )
    $('.mpopup-foot').append(
      '<a id="company-link" target="_blank" style="color: #FFC413;font-weight: bold;">' +
        customer +
        '</a>'
    )
    $('.mpopup-foot').find('#company-link').attr('href', websiteUrl)

    // Tiny delay for setting the src of the iframe for smoother animation
    setTimeout(function() {
      $('#iframez').attr('src', videoUrl)
    }, 400)
  }

  /* Clear The Modal */
  $('.close').click(function() {
    $('#mpopupBox').css('display', 'none')
    $('#slogan,.mpopup-foot, .mpopup-main').empty()
  })