Adjust the layout for Youtube imported video on Desktop

Normally layout would look like this:

Make some changes on the layout it will become this:

Right click on your text, choose inspect and find the markup like below, change the “none” to right

right click on the popped up youtube player, click on inspect,

  1. delete the “is-minimized” in “class=“modal modls hide-default-close video-player is-minimized is-active””, then change the style from " right: 2119px; bottom: 754px;" to " right: 1200px; bottom: 350px;"


2. change class=“modal-content box is-paddingless is-medium”, the “Max-width” to 1900

3. change the class=“video-wrapper”, height to 900

Of course you can automate this by writing some javascript, I’m too lazy so i’m waiting to see if some one will share it.

4 Likes

Paste script below in the console will automaticly adjust it:

var element1 = document.querySelector(‘.reader-container.has-text-dark.is-relative’);

element1.style.float= “right”

var element2 = document.querySelector(‘.modal.modls.hide-default-close.video-player.is-minimized.is-active’);

element2.classList.remove(‘is-minimized’);

var element3 = document.querySelector(‘.modal.modls.hide-default-close.video-player.is-active’);

element3.style.right = “1200px”;

element3.style.bottom = “300px”;

var element4 = document.querySelector(‘.modal-content.box.is-paddingless.is-medium’);

element4.style.maxWidth=“1900px”

var element5 = document.querySelector(‘.video-wrapper’);

element5.style.height=“900px”

1 Like