hteumeuleu / h8uoembed Goto Github PK

Youtube thumbnails often have a different ratio than the video player. For example, in this request, the thumbnail size is 480x360 (4:3 ratio) but the video player size is 480x270 (16:9 ratio).

I'd like to have the static container the same size of the player, so that when a user clicks on the thumbnail, the iframe replacement doesn't move the height of the page. Currently I set the thumbnail size to 100% so that it fits the same width as the video player. But this means that its height is too big (see this example).

I need to find a solution that works at all sizes, and for responsive sites as well.

Adding CSS and JS on wp_footer instead of wp_head is dirty. The reason for this is that I want those assets to be added on the page only if necessary. In order to do this, I use the embed_oembed_html filter (which is called everytime WordPress displays a cached version of an oEmbed object) in order to construct an array of videos of the current page (H8UoEmbed->video_providers). But this means that this array will always be empty when wp_head is called. I need to find another hook or another way to do this.

When a user clicks on the static video link, it replaces the thumbnail with the real video player. In order to prevent a second click to launch the video, I added an autoplay=1 parameter in the iframe src. But for some services (like FunnyOrDie.com) or on certain devices (like on Android or iOS), autoplay doesn't work, thus forcing the user to click a second time (once the player is fully loaded) to effectively play the video.

I need to find a way to force the video to play, or to change the UI so the user understands that the video won't play right away.