Responsive YouTube Embed - problems with black bars
Started out with the method described here and here among many others discussing the same process.
This works fine on desktop browsers... with a little tweaking. The poster-frame looks good on page load, but video playback has black bars on left and right side.
The problem is on iOS because the controller is automatically hidden on page load so the padding-top: 25px; causes black bars to appear at the top and bottom of the video during playback.
#mediayt { padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden; position: relative; margin-bottom: 20px; } #mediayt iframe, #mediayt object, #mediayt embed { top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 1; }
<div id='mediayt'> <iframe width="960" height="540" src="//www.youtube.com/embed/yCyyaznaedY?rel=0&showinfo=0&controls=0&color=white&theme=light" frameborder="0" allowfullscreen></iframe> </div>
Which produces a player without the controller and without black bars on the desktop version and a very fine line at the top of the video when on iOS iPad.
YouTube no longer supports the hd=1 parameter.
āThe border, color1, egm, hd, and showsearch parameters, which are all only supported for the deprecated AS2 Player API, have been moved to a new section named deprecated parameters only used in the AS2 Player API.ā
Because controller is disabled, along with losing the ability to select quality, users also lose the ability to select to view in full screen.
On iOS iPad once video is clicked to play, user is unable to click video to stop playback and the controller is hidden so can't view in fullscreen.
Setting controls=2 produces better results. On the desktop video is presented without controls on page load then when video is clicked to play controls appear and then hide. So user has ability to select quality and fullscreen.
The problem occurs on iOS iPad. When the video is clicked to play it responds to a click but does not play. There is a quick flash as if something happened but the video does not start. If clicked once more the video does begin to play. Buggy.
#mediayt { padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden; position: relative; margin-bottom: 20px; } #mediayt iframe, #mediayt object, #mediayt embed { top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 1; }
<div id='mediayt'> <iframe width="960" height="540" src="//www.youtube.com/embed/yCyyaznaedY?rel=0&showinfo=0&color=white&theme=light" frameborder="0" allowfullscreen></iframe> </div>
This produces best results I've found so far.
The remaining problem is that on iOS iPad there is still a very small, possibly one pixel high, black line at the top of the video.
#mediayt { padding-bottom: 56.21%; padding-top: 0px; height: 0; overflow: hidden; position: relative; margin-bottom: 20px; }
On iOS iPad there are two very tiny black lines on the left and right side of the video during playback and an ultra tiny line at the bottom of the video on page load before being selected to play.
After attempting a lot of measurements in increments to adjust and remove the black lines, at this point I have been unsuccessful in getting rid of them on iOS iPad.
In addition to the problems outlined above, the uploaded custom thumbnail that appears on the desktop side of things does not show, or is very inconsistently showing up, in the HTML5 player on the iOS side.
andulkaphoto
janainaart
discoholicmusic
prguitarman
stormborns
annaxmalina