Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://vjs.zencdn.net/6.2.5/video-js.css" rel="stylesheet">
    <!-- Magnific Popup core CSS file -->
    <link rel="stylesheet" href="https://synthetisoft.com/vidtest/css/magnific-popup.css">
​
    <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
    <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
​
    <script src="https://vjs.zencdn.net/6.2.5/video.js"></script>
    <!-- Magnific Popup core JS file -->
    <script src="https://synthetisoft.com/vidtest/js/jquery.magnific-popup.min.js"></script>
    <meta content="">
    <style></style>
    <script>
      videojs.options.flash.swf = "video-js.swf";
      $('document').ready(function(){
        $('.open-popup-link').magnificPopup({
          type:'inline',
          midClick: true
        });
        $('.open-popup-link').on('click',function(){
          videojs('example_video_1').play();
        })
      })
    </script>
    <style>
      .player {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        background:black;
      }
    </style>
  </head>
  <body>
    <div class="galleryItem">
      <a href="#test-popup" class="open-popup-link">test</a>
      <div id="test-popup" class="player mfp-hide" style="color:#FFF">
        <video id="example_video_1" class="video-js vjs-default-skin vjs-fluid" controls preload="metadata" data-setup=''>
          <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
            <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
          </video>
        </div>
      <h3>One</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
    </div>
​
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mister-benpro
0viewers