Change the default youtube size/location in lesson with Userscript

Open Forum
6

I just added another modification. The embedded YouTube video will be automatically played with subtitles on.

// ==UserScript==
// @name         LingQ Addon
// @match        https://www.lingq.com/*/learn/*/web/reader/*
// @match        https://www.lingq.com/*/learn/*/web/library
// @description  Custom embedded player, and sort course automatically.
// ==/UserScript==

(function () {
  "use strict";


  // Restyle embedded player
  var height = 370;
  var width = 540;
  var right = 0.1;
  var bottom = 13;

  var style = document.createElement("style");
  style.textContent = `
  div.video-wrapper {
      height: ${height}px !important;
      width: ${width}px !important;
  }

  div.modal-content.is-medium {
      max-width: ${width}px !important;
  }

  div.modal {
      right: ${right}% !important;
      bottom: ${bottom}% !important;
  }

  div.sentence--video-player > div > div {
      height: ${height}px !important;
      width: ${width}px !important;
  }

  div.reader-container {
      margin: 0 !important;
      justify-self: stretch !important;
  }

  div.reader-component {
      grid-template-columns: 1.5rem 1fr 1.5rem !important;
  }

  div.reader-component a.button span {
      width: 1.5rem !important;
  }
  `;
  document.querySelector("head").appendChild(style);


  // Custom embedded player
  function replaceNoCookie() {
    document.querySelectorAll('iframe').forEach(function(iframe) {
        let src = iframe.getAttribute('src');

        if (src && src.includes('autoplay=0')) {
            src = src.replace('autoplay=0', 'autoplay=1');
            src = src + '&cc_load_policy=1'
            iframe.setAttribute('src', src);
            console.log(src);
        }
    });
  }

  const iframeObserver = new MutationObserver(function(mutationsList, observer) {
      for (const mutation of mutationsList) {
          if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
              mutation.addedNodes.forEach(node => {
                  if (node.nodeName === 'IFRAME') {
                      replaceNoCookie();
                  } else if (node.querySelectorAll) {
                      node.querySelectorAll('iframe').forEach(replaceNoCookie);
                  }
              });
          } else if (mutation.type === 'attributes' && mutation.attributeName === 'src' && mutation.target.nodeName === 'IFRAME') {
              replaceNoCookie();
          }
      }
  });

  if (document.URL.includes("/reader/")) {
    iframeObserver.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['src'] });
  }


  // Sort courses
  function addClickListener() {
    document.querySelectorAll("div.library-item-wrap").forEach((item) => {
      if (!item.dataset.listenerAdded) {
        item.addEventListener("click", function () {
          setTimeout(() => {
            document
              .querySelector(
                "div.collection-section--controllers > div.dropdown > div.dropdown-menu > div.dropdown-content > a.dropdown-item:nth-child(3)",
              )
              .click();
          }, 500);
        });
        item.dataset.listenerAdded = true;
      }
    });
  }

  const libraryObserver = new MutationObserver(addClickListener);
  if (document.URL.includes("/library")) {
    libraryObserver.observe(document.body, { childList: true, subtree: true });
    addClickListener();
  }
})();

Before
image

After
image

Also, consider this script that automatically collapses the irritating “More videos popup” in the player occurring when the video is paused. It helps me to read subtitles more easily.

// ==UserScript==
// @name         Collapse More-videos
// @description  Automatically collapse More videos popup in YouTube.
// @match        https://www.youtube-nocookie.com/*
// ==/UserScript==

(function () {
  "use strict";

  function clickPlayButton() {
    document.querySelector(".ytp-button.ytp-large-play-button").click();
  }

  function clickCollapseButton() {
    document.querySelector(".ytp-button.ytp-collapse").click();
  }

  function clickSubtitleButton() {
    document.querySelector(".ytp-button.ytp-subtitles-button").click();
  }

  window.addEventListener("load", function () {
    setTimeout(() => {
      clickPlayButton();
      clickCollapseButton();
      clickPlayButton();
    }, 100);
  });

  var style = document.createElement("style");
  style.textContent = `
  div.ytp-pause-overlay{
    visibility: hidden !important;
  }
`;

  document.querySelector("head").appendChild(style);
})();
2 Likes