How to embed player in iframe


You can embed the player on your site via iframe (so distribute all video-sharing sites like YouTube).

An iframe is the site layout element in which the HTML page is loaded. This page also hosts the player. An example of such page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
      <title></title> 
      <script src='playerjs.js' type='text/javascript'></script>
   </head>
   <body>
   <style>
      html,body{
         margin:0;padding:0;width:100%;height:100%;
      }
   </style>
        
   <div id="playerjs" style="width:100%;height:100%;"></div>
        
   <script type="text/javascript">
      var ps = location.href.substr(location.href.indexOf("html?")+5).split("&");
      var vs = {id:"playerjs"};  
      for(var i = 0; i<ps.length; i++){
         var p = ps[i].substr(0,ps[i].indexOf("="));
         var v = ps[i].substr(ps[i].indexOf("=")+1);
         if(p!=v){
            vs[p] = decodeURIComponent(v);
         }
      }
      if(vs.file){
         var playerjs = new Playerjs(vs);
      }
   </script>
</body>
</html>

For example, you place this code in the embed.html file and put it in the player folder. In the same folder should be the player's file (playerjs.js). The iframe code that you embed into the web page will be as follows:

<iframe src="//site.com/player/embed.html?file=VIDEO_URL&poster=POSTER_URL&title=TEXT" type="text/html" width=100% height=100% frameborder="0" allowfullscreen></iframe>

Player variables (file, poster, etc.) can be passed in the iframe query string.

Download the example (unpack the archive into a folder, copy the player (playerjs.js) into it and run the file embed.html)


2018 © Binom LLC

Login

Restore password
Sign up
Log in

Sign up free

Sign up
By signing up, you agree to Terms of Service
Login if you have an account

Restore password

Restore
Forgot email? Contact us