Size fix

[Kamik423]

EDIT: This is not really an issue, but I did not know where else to put it

I have no idea how to write safari plugins or SVGs, but I played around with the website source, and I partially solved the size issue (YouTube):

What I changed:

Button:

Replaced <button class="ytp-button pip-button" title="PiP Mode"></button>

with <button class="ytp-button pip-button ytp-button" title="PiP Mode" height="100%" viewbox="0 0 36 36" width="100%">

SVG

Replaced <svg fill="#FFFFFF" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">

with <svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">

This fixes the scaling issue, but you will have to move the SVG to the right position, because this fix locks it to the top right.

Button source to play around with

<button class="ytp-button pip-button ytp-button" title="PiP Mode" height="100%" viewbox="0 0 36 36" width="100%">
<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
    <path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></button>

Observations

Also the youtube source clusters the SVG paths like this:

<g class="ytp-fullscreen-button-corner-0">
    <use class="ytp-svg-shadow" NS1:href="#ytp-svg-146"></use>
    <path class="ytp-svg-fill" d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z" id="ytp-svg-146"></path>
</g>

which uses a "ytp-svg-fill" class instead of fill="#FFFFFF" and has a shadow. I think it can't harm if you do this as well.

Hope this is in any way helpful!

Kamik423