sidebar-iframe.js

(() => {
    const className = 'dataturd-sidebar';
    function openIframe(url) {
        if ( document.querySelector('.' + className) ) {
            console.log('Sidebar already exists');
            return
        }
        
        var styleTag = document.createElement('style');

        styleTag.innerHTML = `
.${className} {
    z-index: 1000;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 320px;
    height: 100vh;
    box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);
}
.${className} button {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 50px;
    height: 50px;
    background: #fff;
    font-weight: bold;
}

.${className}::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
}
            `
        document.head.appendChild(styleTag);

        var sideDiv = document.createElement('div');
        sideDiv.className = className;

        var closeButton = document.createElement('button');
        closeButton.innerHTML = 'X';
        closeButton.addEventListener('click', function() {
            document.body.removeChild(sideDiv);
        });

        var iframe = document.createElement('iframe');
        iframe.src = url;
        iframe.allow='autoplay';
        iframe.style.width = '100%';
        iframe.style.height = '100%';
        iframe.style.border = 'none';

        sideDiv.appendChild(closeButton);
        sideDiv.appendChild(iframe);
        document.body.appendChild(sideDiv);

        let startX;
        let startWidth;

        sideDiv.addEventListener('mousedown', function (e) {
          startX = e.clientX;
          startWidth = parseInt(document.defaultView.getComputedStyle(sideDiv).width, 10);

          document.addEventListener('mousemove', resize);
          document.addEventListener('mouseup', stopResize);
        });

        function resize(e) {
          const width = startWidth - (e.clientX - startX);
          sideDiv.style.width = `${width}px`;
        }

        function stopResize() {
          document.removeEventListener('mousemove', resize);
          document.removeEventListener('mouseup', stopResize);
        }
    }
    openIframe(window.dataturd_sidebar_url);
})();

Inject the script using your favorite method:

((d, w) => {
    w.dataturd_sidebar_url = 'https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1';
    var s = d.createElement('script');
    s.src = 'https://gistcdn.githack.com/ddrscott/92d38c3f9972721248d4f5e1ba4a645f/raw/76b48286e41d91fb9d84cba5dd421a7b240ffdd1/sidebar-iframe.js';
    d.body.appendChild(s);
})(document, window)

Use Mr. Coles to create a bookmark: https://mrcoles.com/bookmarklet/

You now have a sidebar for whatever site you need. Some sites prevent this with Content Security Policy, but most don't.