Improved YouTube Transcript for Language learning, click transcript to hide the element below the video.
Per
// ==UserScript==
// @name Improve YouTube Transcript for Language learning
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Improved YouTube Transcript for Language learning, click transcript to hide the element below the video.
// @author AVES
// @include http*://*.youtube.com/watch*
// @include http*://youtube.com/watch*
// @run-at document-end
// ==/UserScript==
add();
function add(){
var $bar = document.getElementById("watch8-secondary-actions");
var $newButton= document.createElement('div');
$newButton.className="yt-uix-menu ";
var $transcriptButton=document.createElement("button");
$transcriptButton.className="yt-ui-menu-item has-icon yt-uix-menu-close-on-select action-panel-trigger action-panel-trigger-transcript";
var $label=document.createElement("span");
$label.className="yt-ui-menu-item-label";
var $textTranscript = document.createTextNode("Transcript");
$bar.appendChild($newButton);
$newButton.appendChild($transcriptButton);
$transcriptButton.appendChild($label);
$label.appendChild($textTranscript);
$transcriptButton.setAttribute("data-trigger-for","action-panel-transcript");
var $windowTranscript=document.getElementById("watch-actions-transcript");
var $h2Transcript= document.getElementsByClassName("yt-card-title");
var $title=document.getElementById("watch-header");
$transcriptButton.onclick=function(){
$title.style.display="none";
var sheet = document.createElement("STYLE");
var t = document.createTextNode(".caption-line-time { display: none; }.caption-line-text { width: 100%; }");
sheet.appendChild(t);
document.head.appendChild(sheet);
$h2Transcript[0].style.float="right";
$h2Transcript[0].style.padding="0 10px";
var $close= document.getElementById("action-panel-dismiss");
setTimeout(function(){$close.onclick=function(){$title.style.display="block";};},10);
};
}