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.



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?