In this example below you will see how to do a hapyak-magnificPopup-iframe with some HTML / CSS and Javascript

Using hapyak iframe video in a magnific pop up light box.

This awesome code was written by 1bladesforhire, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1bladesforhire ©


  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <link rel='stylesheet prefetch' href='https://dimsemenov-static.s3.amazonaws.com/dist/magnific-popup.css'>



  <a class="video" href="www.hapyak.com/embed?key=90647c1d5c8f40d7a43f&amp;project=26137">Open Hapyak video</a>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js'></script>


    <script  src="js/index.js"></script>



/*Downloaded from https://www.codeseek.co/1bladesforhire/hapyak-magnificpopup-iframe-YwXRLx */
  type: 'iframe',

  iframe: {
    markup: '<div class="mfp-iframe-scaler">' +
      '<div class="mfp-close"></div>' +
      '<iframe id="hapyak-player-26137-6312" marginwidth="0" marginheight="0" frameborder="no" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" src="//www.hapyak.com/embed?key=90647c1d5c8f40d7a43f&amp;project=27831" width="1280" height="779" class="hapyak-embed hapyak-responsive"></iframe>' +
      '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button

    patterns: {
      youtube: {
        index: 'hapyak.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).

        id: '', // String that splits URL in a two parts, second part should be %id%
        // Or null - full URL will be returned
        // Or a function that should return %id%, for example:
        // id: function(url) { return 'parsed id'; }

        src: '//www.hapyak.com/embed?key=90647c1d5c8f40d7a43f&amp;project=%id%' // URL that will be set as a source for iframe.
      // you may add here more sources


    srcAction: 'iframe_src', // Templating object key. First part defines CSS selector, second attribute. "iframe_src" means: find "iframe" and set attribute "src".