Possible Bug With YouTube Video Shortcode

UPDATE (08/18/2014): I have tested this on a site running Peter Westwood‘s Bleeding Edge Nightlies and it still seems a bit buggy. Scroll down to see the WordPress 4.0 screen shots.

UPDATE: Currently there seems to be a bug with the youtube video shortcode on mobile devices using the below code and much of the other examples I have looked at.  Please be advised before using this and please advise me if you have a good solution.  Thanks!

I saw Scott Taylor‘s talk “Hpw To Read and Write WordPress Media Code” and I will admit I took a ton of notes, but the only thing that has stuck with me (probably because of the project I am work on) is using the built in video shortcode I can embed responsive chromeless Youtube videos into my clients sites.

This proved easier said than done (for me.)  After reaching out to Scott to figure out the most basic use, I then started down a 2 day sinkhole of trying to get the video to work responsively — yes even though it does by default — basically. I thought that the below code from Twenty Fourteen would be all I needed to get chromeless youtube videos  to work, as it works great on the desktop:

See it seems like it works great on desktop… but here is a screen shot of what it looks like on my Windows Phone, iPhone and a Google Nexus 5.

Starting from the left we have the same setup as before, Windows Phone, iPhone, & Nexus S.

This is the code being used in Twenty Fourteen.

/* Mediaelements */
 
.hentry .mejs-container {
    margin: 12px 0 18px;
}
 
.hentry .mejs-mediaelement,
.hentry .mejs-container .mejs-controls {
    background: #000;
}
 
.hentry .mejs-controls .mejs-time-rail .mejs-time-loaded,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: #fff;
}
 
.hentry .mejs-controls .mejs-time-rail .mejs-time-current {
    background: #24890d;
}
 
.hentry .mejs-controls .mejs-time-rail .mejs-time-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    background: rgba(255, 255, 255, .33);
}
 
.hentry .mejs-container .mejs-controls .mejs-time {
    padding-top: 9px;
}
 
.hentry .mejs-controls .mejs-time-rail span,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    border-radius: 0;
}
 
.hentry .mejs-overlay-loading {
    background: transparent;
}

So at this point it’s a matter of determining what’s going on here and how to fix it. Until then, anyone have any ideas?