Question

I’m having one of the strangest rendering issues with Android browsers (Galaxy Tab 10.1 and S3 so far .. haven’t tested on iPhone or other mobile browsers).

I’m dynamically embedding a fixed position responsive Youtube video on a webpage. You click a button in Javascript – it creates a black backdrop (also fixed position) and a Youtube embed with an id so I can control the properties at different screen sizes. So far so good. This goes off without a hitch. I check it out in Chrome, Firefox and even IE and I’m not disappointed. Yet.

I check it on my Android phone (Galaxy S3 – stock browser) and it appears that the video is having a hard time understanding where it’s supposed to be rendered. I notice at least 3 repositions before it settles on a spot. Sometimes I’m lucky to see part of the element is somewhat on screen. Most other times, not so lucky. The code hasn’t changed and the browser size definitely hasn’t changed; just the rendering has.

To make matters worse, it seems like the element is actually placed in the correct place but rendered incorrectly. If I click on the center (or near enough to it), the video plays! The rendering shows it playing while re-rendering constantly, still unsure of where its supposed to be.

I know this problem sounds super-crazy and it might be a tricky one to even diagnose (let alone debug) so I’m including as much code related to the whole operation as possible. Help is greatly appreciated!

Creating and Embedding the Video

donModal.addEventListener("click", function(e) {

        e.preventDefault();

        var donPreview = document.createElement("iframe");
        donPreview.src = "http://www.youtube.com/embed/oeZgLFsglcc";
        donPreview.frameborder = "0";
        donPreview.allowfullscreen = "allowfullscreen";
        donPreview.id = "donModalVideo";

        document.body.appendChild(donPreview);

        sfx.toggleBackdrop(donPreview);         
    });
}

Video Styles

#donModalVideo {
  position: fixed;
  width: 40%;
  height: 50%;
  top: 25%;
  left: 30%;
  z-index: 95;
}

URL for Test

Can’t fiddle right now .. hope this is ok …

http://openheavens.designbymobius.ca/artistes#donmoen

Answer 1

Solved it!!!

There were a combination of factors that contributed to the problem.

1. There was no height set for it (or it’s parent element).
2. Fixed position is glitchy on mobile devices

Armed with that knowledge, I:

1. Changed the position property to static.
2. Wrote a little function to set the height as a fixed ratio of the width (I used 0.5625) which triggered every time the window was resized. Now the video size is flexible and it perfectly maintains its ratio.
3. Wrote a second function to set the top value as the (viewport height - video height) / 2 + window.pageYOffset. It’s triggered whenever you scroll the page.

End result is a static position video which dynamically adjusts width while maintaining its ratio as well as simulates the effect of position: fixed.

The end result can be seen here. Click to watch an artist preview video 🙂