slide-drive icon indicating copy to clipboard operation
slide-drive copied to clipboard

Embedding a <video> in a .slide makes everything blow up in Chrome

Open banksJeremy opened this issue 12 years ago • 3 comments

When I embed a <video> element inside a .slide, Chrome hides everything except for a 10-pixel margin around the side of the page.

Firefox does not have an issue.

banksJeremy avatar Jun 13 '12 20:06 banksJeremy

Possibly related to http://code.google.com/p/chromium/issues/detail?id=75819

banksJeremy avatar Jun 13 '12 20:06 banksJeremy

Interesting... detaching the video from the DOM and then re-inserting it fixes the issue.

var vid = document.querySelector("video"),
    par = vid.parentNode,
    placeholder = document.createElement("div");
par.replaceChild(placeholder, vid);
setTimeout(function(){ par.replaceChild(vid, placeholder); }, 0);

That's an easy workaround, even if ugly. Be nice to know what's causing it, though...

banksJeremy avatar Jun 13 '12 20:06 banksJeremy

That only fixes it temporarily. It may break again if the page is resized.

Commenting out resizeTranscript fixes the issue. The issue seems to be caused by setting the value of document.getElementById( "slideshow-transcript" ).style.height, even if the new value is equivalent. (e.g. elem.style.height = +elem.style.height;, the result is converted from a Number to a String with units, but in the end it has the same value.)

banksJeremy avatar Jun 13 '12 20:06 banksJeremy