YouTube Background Magic.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 132,
   "metadata": {},
   "outputs": [],
   "source": [
    "ip = get_ipython()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 157,
   "metadata": {},
   "outputs": [],
   "source": [
    "@ip.register_magic_function\n",
    "def ytbg(line):\n",
    "    from IPython import display\n",
    "    from jinja2 import Template\n",
    "    display.display(display.HTML(Template(\"\"\"\n",
    "<style>\n",
    "    .notebook_app > #header {\n",
    "        opacity: 0.9;\n",
    "        background-color: rgba(255,255,255,1);\n",
    "    }\n",
    "    #notebook-container {\n",
    "        box-shadow: none;\n",
    "        background: transparent;\n",
    "    }\n",
    "    .notebook_app > #header:not(:hover),\n",
    "    .notebook_app > #pager:not(:hover)  {\n",
    "        opacity: 0.5;\n",
    "        background-color: transparent;\n",
    "    }\n",
    "    .notebook_app > #header:not(:hover) .btn,\n",
    "    .notebook_app > #header:not(:hover) select,\n",
    "    .notebook_app > #header:not(:hover) #menus {\n",
    "        background-color: transparent !important;\n",
    "        border-color: transparent;\n",
    "    }\n",
    "    #notebook .cell:not(.selected) .input_area {\n",
    "        background: rgba(255,255,255, calc((100 - var(--ytbg-opacity)) / 100));\n",
    "    }\n",
    "    #notebook .cell.selected .input_area {\n",
    "        background: rgba(255,255,255, calc(2 * (100 - var(--ytbg-opacity)) / 100));\n",
    "    }\n",
    "    iframe.ytbg {\n",
    "        opacity: calc(var(--ytbg-opacity) / 100);\n",
    "        position: fixed;\n",
    "        top: 0;\n",
    "        left: 0;\n",
    "        width: 100vw;\n",
    "        height: 100vh;\n",
    "        border: 0;\n",
    "    }\n",
    "</style>\n",
    "<style class=\"ytbg-vars\">\n",
    ":root {\n",
    "    --ytbg-opacity: 50;\n",
    "}\n",
    "</style>\n",
    "<script>\n",
    "$('.ytbg').remove();\n",
    "\n",
    "$('<iframe />', {\n",
    "    \"class\": 'ytbg',\n",
    "    src: 'https://www.youtube.com/embed/{{ v }}?enablejsapi=1'\n",
    "})\n",
    ".prependTo('#notebook_panel, .nbviewer .container-main');\n",
    "\n",
    "$('<div/>', {\"class\": 'ytbg btn-group'})\n",
    ".append(\n",
    "    $('<input/>', {\"class\": \"input\", type: 'range'})\n",
    "    .on(\"input\", function(evt){\n",
    "        $('.ytbg-vars').text(\":root {--ytbg-opacity: \" + evt.currentTarget.value + \";}\")\n",
    "    })\n",
    ")\n",
    ".appendTo('#maintoolbar-container');\n",
    "</script>\n",
    "    \"\"\").render(v=line or \"0fKBhvDjuy0\")))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 158,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "    .notebook_app > #header {\n",
       "        opacity: 0.9;\n",
       "        background-color: rgba(255,255,255,1);\n",
       "    }\n",
       "    #notebook-container {\n",
       "        box-shadow: none;\n",
       "        background: transparent;\n",
       "    }\n",
       "    .notebook_app > #header:not(:hover),\n",
       "    .notebook_app > #pager:not(:hover)  {\n",
       "        opacity: 0.5;\n",
       "        background-color: transparent;\n",
       "    }\n",
       "    .notebook_app > #header:not(:hover) .btn,\n",
       "    .notebook_app > #header:not(:hover) select,\n",
       "    .notebook_app > #header:not(:hover) #menus {\n",
       "        background-color: transparent !important;\n",
       "        border-color: transparent;\n",
       "    }\n",
       "    #notebook .cell:not(.selected) .input_area {\n",
       "        background: rgba(255,255,255, calc((100 - var(--ytbg-opacity)) / 100));\n",
       "    }\n",
       "    #notebook .cell.selected .input_area {\n",
       "        background: rgba(255,255,255, calc(2 * (100 - var(--ytbg-opacity)) / 100));\n",
       "    }\n",
       "    iframe.ytbg {\n",
       "        opacity: calc(var(--ytbg-opacity) / 100);\n",
       "        position: fixed;\n",
       "        top: 0;\n",
       "        left: 0;\n",
       "        width: 100vw;\n",
       "        height: 100vh;\n",
       "        border: 0;\n",
       "    }\n",
       "</style>\n",
       "<style class=\"ytbg-vars\">\n",
       ":root {\n",
       "    --ytbg-opacity: 50;\n",
       "}\n",
       "</style>\n",
       "<script>\n",
       "$('.ytbg').remove();\n",
       "\n",
       "$('<iframe />', {\n",
       "    \"class\": 'ytbg',\n",
       "    src: 'https://www.youtube.com/embed/0fKBhvDjuy0?enablejsapi=1'\n",
       "})\n",
       ".prependTo('#notebook_panel, .nbviewer .container-main');\n",
       "\n",
       "$('<div/>', {\"class\": 'ytbg btn-group'})\n",
       ".append(\n",
       "    $('<input/>', {\"class\": \"input\", type: 'range'})\n",
       "    .on(\"input\", function(evt){\n",
       "        $('.ytbg-vars').text(\":root {--ytbg-opacity: \" + evt.currentTarget.value + \";}\")\n",
       "    })\n",
       ")\n",
       ".appendTo('#maintoolbar-container');\n",
       "</script>\n",
       "    "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%ytbg"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}