Question

I made a very minimal javascript bookmarklet (~1 KB minified) that lets me play videos inside a distraction-free lightbox. In my script, I clone the <embed> element containing the movie and wrap a lightbox div around it, so even in those cases where the “Turn Lights Off” chrome extension fails, mine works. Only problem is that since I clone the <embed>, I lose any buffering I had done previously. This is a major turnoff as I’m on a slow connection and I don’t always remember to load the bookmarklet before hitting play — the UX is downright horrible.

Is there a way to improve the script so I can isolate the <embed> in a lightbox without losing any buffering done prior?

Here’s my bookmarklet code (you can try it out on this site)— puts an icon next to any <embed> element on the page that you can click to isolate that <embed> inside a distraction-free lightbox:

javascript:(function(){
var isolated = false, smallestVideo=300, videoElements=document.getElementsByTagName('embed'), activate_style='width:16px; height:16px; position:relative; cursor:pointer; left:-23px; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAYFBMVEUAAAAcHBwjHyAAAAAkHyErKysjHyAkHyEkJCQkHyEkISElISEiHyAzMzMjICEkHyEgICAjHyAkHyAuLi4jICE4NDUjHyD08/MnIyREQEEkICH////z8/NDP0AmIiN6d3irZqRxAAAAFXRSTlMACfYC8wb8qweNRkX1CvibCPX0C/d4B0jeAAAAi0lEQVQY02VPWRKFMAijm7VWrfrs4n7/W0qX54xjfoBAIAAgmCAIwaCgbiSnlMumzvXP0MohqlZ1qa96V9CbAfV6ivmamFEzEDLOh8WeUSUFEB7ry+9XwIQTIBSj9dvmD5TRTKxHJKzLRJbs/i/JS0+7hLKU6dE9dyc8C4N5jM0qme9U+7L+fe79/g3f2AzxgGRvowAAAABJRU5ErkJggg==) no-repeat center center';
for (var i = 0; i < videoElements.length; i++) {
    var video = videoElements[i];
    if (video.width < smallestVideo || video.height < smallestVideo) {
        continue;
    }
    var activate = document.createElement('div');
    activate.setAttribute('id','curtain');
    activate.setAttribute('style', activate_style);
    activate.style.top = '-'+ (video.clientHeight + 3) + 'px';
    video.parentNode.insertBefore(activate, video.nextSibling);
    activate.onclick = isolate;
}

function isolate() {
    if(!isolated) {
        var theatre_style = 'position:fixed; background-color:#000; z-index:99999; width:100%; height:100%; left:0; top:0; text-align:center; line-height:100%', off_style='display:none;', on_style='display:block;';
        var orig_video = this.previousSibling;
        var theatre_div = document.createElement('div');
        theatre_div.setAttribute('style', theatre_style);
        theatre_div.onclick = function() { 
            this.setAttribute('style', off_style); 
            this.removeChild(clonevideo); 
            isolated = false; 
            orig_video.setAttribute('style', on_style); 
        };
        document.getElementsByTagName('body')[0].appendChild(theatre_div);
        var clonevideo = orig_video.cloneNode(true);
        theatre_div.appendChild(clonevideo);
        orig_video.setAttribute('style', off_style);
        clonevideo.setAttribute('style', 'position:relative; top:50px;');
        var video_frame = document.createElement('div');
        theatre_div.appendChild(video_frame);   
        video_frame.onclick = function(e) { e.stopPropagation(); };
        clonevideo.onclick = function(e) { e.stopPropagation(); };
        isolated = true;
    }
}
})();

---

I heartily welcome suggestions to improve the script in other areas besides the buffering problem, but I encourage you to post them as comments than as answers.

Answer 1

Edited: These first quoted suggestions did not work. Left as an example of what probably won’t work.

Instead of cloning, simply try to move the node with a function like:
function move(obj, dest){dest.appendChild(obj.parentNode.removeChild(obj));}

If that doesn’t work, try placing a black div layer over the entire
page and modifying the z-index of the embed object so that it is above
that div layer. If that doesn’t work,…

Create 4 black div layers aligned to cover entire page except for the embed object.

Or apply css to the page to turn all links, all divs, all everything black and use !important to over-ride all other styles. To do this, create a single class that can be applied to every element. Later you can remove that class from every element to restore the page to it’s previous state. Using jQuery it would be something like $('*').addClass('blackout') and $('*').removeClass('blackout')

You might replace or combine suggestion #2 with something like this:

$('input').remove();
$('iframe').remove();
$('img').remove();
$('a').remove();
$('embed').not(theVideoIWant).remove();
$('object').not(theVideoIWant).remove();