hapyak-magnificPopup-inline

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

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

Thumbnail
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 ©

Technologies

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

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

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="videoBlockWrapper">
  <a class="hapyak-video">Open Hapyak video</a>
    <div class="centering-wrapper">
      <iframe id="hapyak-player-26137-6312" marginwidth="0" marginheight="0" frameborder="no" scrolling="no" allowfullscreen="" webkitallowfullscreen=""   mozallowfullscreen="" width="100%" height="100%" src="//www.hapyak.com/embed?key=90647c1d5c8f40d7a43f&amp;project=27831" class="hapyak-embed  white-popup mfp-hide"></iframe>
    </div>
</div>
<div class="videoBlockWrapper">
  <a class="hapyak-video">Open Hapyak video</a>
    <div class="centering-wrapper">
      <iframe id="hapyak-player-25430-9081" marginwidth="0" marginheight="0"  frameborder="no" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" width="100%" height="100%" src="//www.hapyak.com/embed?key=90647c1d5c8f40d7a43f&amp;project=25655" class="hapyak-embed hapyak-responsive mfp-hide white-popup"></iframe>
    </div>
</div>
  <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='http://d2qrdklrsxowl2.cloudfront.net/js/hapyak.js'></script>
<script src='http://d2qrdklrsxowl2.cloudfront.net/js/hapyak.api.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/1bladesforhire/hapyak-magnificpopup-inline-BjjagV */

.white-popup {
  position: relative;
  padding: 0px;
  margin: 20px auto;
  text-align: center;
  width: 100%;
}

.mfp-content {
  max-width: 50%;
}

/*Downloaded from https://www.codeseek.co/1bladesforhire/hapyak-magnificpopup-inline-BjjagV */
$(document).ready(function(){
  $('a.hapyak-video').each(function(){
    var newID = $(this).next().find('iframe').attr('id') ;
     $(this).attr('href', "#"+newID);
  });
 
});

$('a.hapyak-video').magnificPopup({
  type:'inline',
  midClick: true, // allow opening popup on middle mouse click. 
  closeBtnInside: true
});

Comments