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)



The Art of Players
2018 © PlayerJS with ♥

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

Order player

Your name
What project do you need a player for?
Email
Phone
Description
Send
You agree to processing of this personal data.

Restore password

Restore
Forgot email? Contact us