feat(demo): Added new demo file; renamed bundles and updated README t…

…o obtain better information about package
openplayerjs · Jan 10, 2019 · 80df3f1 · 80df3f1
1 parent 775965b
commit 80df3f1
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,37 @@
-# openplayerjs-youtube
-Extension to allow YouTube videos to be played by OpenPlayer
+# OpenPlayerJS - YouTube extension
+
+Play YouTube videos using OpenPlayerJS.
+
+## Installation
+
+1. Set the video/audio as indicated in the [OpenPlayerJS installation](https://github.com/openplayerjs/openplayerjs#installation).
+2. Set the `type` of your source as `video/x-youtube`.
+3. Load this package library right after [OpenPlayerJS](https://github.com/openplayerjs/openplayerjs).
+4. And voilá!
+
+## Configuration
+
+It allows you to override YouTube's configuration by using the `youtube` object in the settings. Check [Supported parameters section](https://developers.google.com/youtube/player_parameters#Parameters) for more details.
+
+## Example
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<body>
+    <video class="op-player__media" id="video" controls playsinline>
+        <source src="https://www.youtube.com/watch?v=xcJtL7QggTI" type="video/x-youtube">
+    </video>
+    <script src="https://cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.min.js"></script>
+    <script src="/path/to/openplayerjs-youtube.min.js"></script>
+    <script>
+        var player = new OpenPlayer('video', null, false, {
+            youtube: {
+                // config
+            }
+        });
+        player.init();
+    </script>
+</body>
+</html>
+```
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>OpenPlayerJS - YouTube</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="https://www.openplayerjs.com/img/favicon.png" type="image/x-icon">
+    <link rel="icon" href="https://www.openplayerjs.com/img/favicon.png" type="image/x-icon">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openplayerjs@1.6.0/dist/openplayer.min.css">
+    <style>
+        body {
+            max-width: 700px;
+        }
+    </style>
+</head>
+<body>
+    <div class="players video-player">
+        <h1>YouTube Sample</h1>
+        <video class="op-player__media" id="video" controls playsinline
+            data-op-ads="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpostoptimizedpod&cmsid=496&vid=short_onecue&correlator=">
+            <source src="https://www.youtube.com/watch?v=xcJtL7QggTI" type="video/x-youtube">
+        </video>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/openplayerjs@1.6.0/dist/openplayer.min.js"></script>
+    <script src="../dist/openplayerjs-youtube.min.js"></script>
+    <script>
+        var player = new OpenPlayer('video', null, false, {
+            youtube: {
+                fs: 0,
+                modestbranding: 1,
+                rel: 0,
+            }
+        });
+        player.init();
+    </script>
+</body>
+</html>
diff --git a/dist/openplayer-youtube.js → dist/openplayerjs-youtube.js b/dist/openplayer-youtube.js → dist/openplayerjs-youtube.js
diff --git a/dist/openplayer-youtube.min.js → dist/openplayerjs-youtube.min.js b/dist/openplayer-youtube.min.js → dist/openplayerjs-youtube.min.js
diff --git a/webpack.config.js b/webpack.config.js
@@ -5,7 +5,7 @@ const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
 module.exports = {
     context: __dirname,
     entry: {
-        'openplayer-youtube.min.js': './src/youtube.js'
+        'openplayerjs-youtube.min.js': './src/youtube.js'
     },
     output: {
         path: path.resolve(__dirname, './dist'),