Draw button below full screen video

Fixes #64

Author: e0da

.gitignore

@@ -1,2 +1,3 @@
 pkg
 lib
+node_modules

README.md

@@ -1,45 +1,41 @@
-Popout for YouTube™
-===================
+# Popout for YouTube™
 
 An extension for Google Chrome™ that adds a button to videos on youtube.com to
 "pop out" the video into a new window. Uses jQuery.
 
-Download and Install
---------------------
+## Download and Install
 
 Download and install via the [Chrome Web
 Store](https://chrome.google.com/webstore/detail/pofekaindcmmojfnfgbpklepkjfilcep).
 
-Implementation
---------------
+## Implementation
 
 Popout for YouTube™ is written in [CoffeeScript](http://coffeescript.org). The
 source code is managed on GitHub at
 http://github.com/sidewaysmilk/popout_for_youtube .
 
-Development Requirements
-------------------------
+## Development Requirements
 
-You need CoffeeScript and zip support to build it. If you have the bins
-`coffee`, `cake`, and `zip`, you're good to go.
+You need a `zip` bin in your path and yarn or npm.
 
-Compiling
----------
+```sh
+yarn install
+```
 
-Run `cake` for a list of tasks. These are the big ones.
+## Compiling
 
-* `cake build` to compile
-* `cake zip` runs `cake build` then prepares the Chrome extension as a zip file
+Run `yarn run` for a list of tasks. These are the big ones.
 
-Contributions
--------------
+- `yarn build` - compiles the CoffeeScript to JavaScript
+- `yarn zip` - `yarn build` then prepares the Chrome extension as a zip file
+
+## Contributions
 
 Thanks to the following developers for their contributions to the project!
 
-* [sjb933][] - [#46][pr46]
+- [sjb933][] - [#46][pr46]
 
-Copyright and License
----------------------
+## Copyright and License
 
 Copyright © 2010-2014, Justin Force - Licensed under the MIT License
 

manifest.json

@@ -11,23 +11,13 @@
   ],
   "content_security_policy": "script-src 'unsafe-eval' 'self' https://www.youtube.com https://s.ytimg.com https://ssl.google-analytics.com; object-src 'self'",
   "background": {
-    "scripts": [
-      "analytics.js",
-      "lib/background.js"
-    ]
+    "scripts": ["analytics.js", "lib/background.js"]
   },
   "content_scripts": [
     {
-      "matches": [
-        "http://www.youtube.com/*",
-        "https://www.youtube.com/*"
-      ],
-      "js": [
-        "lib/popout_for_youtube.js"
-      ],
-      "css": [
-        "popout_for_youtube.css"
-      ]
+      "matches": ["http://www.youtube.com/*", "https://www.youtube.com/*"],
+      "js": ["lib/popout_for_youtube.js"],
+      "css": ["popout_for_youtube.css"]
     }
   ],
   "icons": {

package.json

@@ -0,0 +1,10 @@
+{
+  "devDependencies": {
+    "coffeescript": "^2.3.2"
+  },
+  "scripts": {
+    "build": "cake build",
+    "watch": "cake watch",
+    "zip": "cake zip"
+  }
+}

popout_for_youtube.css

@@ -1,11 +1,9 @@
 .popout-for-youtube__button {
-  transition: visibility 0s, opacity 350ms ease-in; /* [v] visibility animation */
   outline: none;
   text-indent: -999em;
   width: 29px;
   height: 29px;
   position: absolute;
-  z-index: 9999; /* [z] Ensure button is below video */
   cursor: pointer;
   border-style: none;
   background-color: transparent;
@@ -14,6 +12,16 @@
 
   /* Base64 encoded images/icon29.png */
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAARvSURBVEiJvZdfSFtXHMe/53jun7SrA4dZ1Aajk0QiMhm0dpK6hw1LGD4IhVVaOoobyNje7P4x2IsM1m1MBoW1zIchfdcy0Mi2ihP/IAhbdKJLnEqmi2biTDS53nvP2YOaapKrsRv7wnm558fvc77f+zvhhggh8H+LnVRACKEAngJwBgB5AgYHsANgWwjBT4QSQmwul8vt9/vfcrvdL1NK6WmJhmHoMzMzfX19fd2EkAUhhE6s4iWEML/f/1pLS8u9uro65vV6FcZODCZLmqYhGAwmg8Gg2dPT0zQ6OjoBIUTOBeBMZ2fnr6urq8I0zX+95ufnjY6Ojn4AquXRq6urny4tLXXZ7fYjz1Pb2wgODsA0jGMdCs5RcbEejopKAEBFRUVBVVXVZQCP8yKEEACKw+E4p6pqgd1ur1RVFZnxz3z1JV6wF+cX7WA/dl9vg6QoIISAMUYBELYPZC6X67zP52uqqal5U5Zl29bWliKEUDKhiZ0k9Hg8LygF8NcfETy77/ZAjBBCfT6ft7W1ddjpdJ6tq6tjkiRhZWUFoVAoy2n9Bx/i96kpcMPMgqyMj+GClkTB4SEXyOrBXC6X3NDQ0NnY2Fjo9XoJsFeUSqWwl/hRSYoK94sNWc9Hur/B87E1cEqhmSakggIc9MoUY4zJlZWVr3g8nizCoUk+Vj/d+xqeX34GKEXcMBBUVVw0kns9uJntlHNOZFmWKKXpzcOwk6DDd++ianICghBsmSai/ldBQ79BXwgDALjJs3qkw7e6r8etoa4uuH78ASKxja3Nv/Fn0xVcuHYN5q4OPZ6AHk9AcJ55/x//DB4+TT6RPvric5QPDoITgh3OsXn9Buqv39hzp++mJ1zO9U5Pap7rAI/ufIrzDx9CEIIE59hqewOXbt5M13Jdh5FIpKFZ79TKaWYkaeBnd+B48GDPoRDYefsdXLp160gd39XTTnmuQToOmsup1t0NbhjYEQKpjttoaGvLqpEKz6WhkmqzHqR8pfkuIwQC7fa7aGhvz1nz0nvvY+a5Kiw0XcEz5eVZ+yzTWaa7zFM2379vuXcgyWbD1f5+y5qc8QKAzWZDMpnMa5LzkWma0DRtF4CwvKeqqkLTNKyurv4n0HA4rM/Ozn4HQLe8MrIso7a2FsPDw3A4HHC73XiCrxUYhoHp6el4JBKJDw0NfXIEmjVhlMLr9aK4uBihUAgjIyN5g9bX10U8Hh+nlO4YhrE9NTX1bSAQmAAQFUJwSygASJKEkpISFBUVner9DgwM8N7e3o7x8fF5ACaAbQC62G/AKKVC13XTNE1mFZ+iKFAUJW+njDFOCFkSQsRy7dNUKqUvLy+PLi0t5d30OMViMUSj0eWFhYVNy0NFIhFtbGzsI6fT+f3a2pri8XjoaVwdyDAMhMNhPjc3p09OTn4cjUY1q1oihAAhRCorK6tobm5ur66uvsoYk08LFUKYi4uLgUAg0DU9PT0vhEgdCwXSX4NnnU5noaIop74blFIRi8XiGxsbiYO/D1b6Bzux4YozW0teAAAAAElFTkSuQmCC);
+
+  /*
+   * [z] Ensure button is below video. Should be higher than
+   * #masthead-container and lower than video.
+   * #masthead-container z-index is 2020 as of Dec 3, 2018.
+   */
+  z-index: 2050;
+
+  /* [v] visibility animation */
+  transition: visibility 0s, opacity 350ms ease-in;
 }
 
 .popout-for-youtube__button--hidden {
@@ -23,5 +31,9 @@
 }
 
 video {
-  z-index: 10000; /* [z] Ensure button is below video */
+  /*
+   * [z] Ensure button is below video. Make this higher than
+   * .popout-for-youtube__button
+   */
+  z-index: 3000;
 }

yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+coffeescript@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/coffeescript/-/coffeescript-2.3.2.tgz#e854a7020dfe47b7cf4dd412042e32ef1e269810"
+  integrity sha512-YObiFDoukx7qPBi/K0kUKyntEZDfBQiqs/DbrR1xzASKOBjGT7auD85/DiPeRr9k++lRj7l3uA9TNMLfyfcD/Q==