I’m working on a client project right now that makes heavy use of embedded videos. It’s exciting because as someone who primarily develops themes and plugins for marketing sites (and whose personal blog is almost exclusively text and code) it’s rare that I really spend much time with the rich-media embeds that have been getting so much attention from the core team over the last few releases.
As I started playing with the video embeds I immediately noticed an issue – there was nothing in the media widget that allowed authors to set a poster frame (the static image that appears in the video player before the user clicks the play button). I checked the documentation for the video shortcode and found that the shortcode accepts an optional poster attribute, which allows authors to specify a poster image.
The site I’m working on could be classified a video news blog; each post contains a single video and some supporting textual content. The theme makes use of featured images (post thumbnails), which seems like a natural place to set the poster frame. To avoid authors having to manually set the poster attribute on every video embed I whipped up the following snippet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/** * Override the default WordPress video shortcode, * injecting the post thumbnail as a poster frame * unless one has explicitly been set. * * @param array $attr The shortcode attributes * @param str $content Content enclosed between open * and closing shortcode tags. * @return str */ function grunwell_video_embed( $attr, $content='' ) { if ( ! isset( $attr['poster'] ) && has_post_thumbnail() ) { /* * This uses a custom, 16:9 image size named 'poster' * but could be any size. */ $poster = wp_get_attachment_image_src( get_post_thumbnail_id(), 'poster' ); $attr['poster'] = $poster['0']; } return wp_video_shortcode( $attr, $content ); } add_shortcode( 'video', 'grunwell_video_embed' ); |
This snippet overrides the default “video” shortcode (which normally just calls wp_video_shortcode()) so that we can inject the post thumbnail as a poster frame if the attribute hasn’t already been set. If you wanted to take it a step further you could very easily do things like set default poster frames, change behavior based on post format (for instance, only do this on video posts), etc.
![php[tek] 2024 logo](https://stevegrunwell.com/wp-content/uploads/2024/02/phptek-2024-150x150.png)
Luke Clifton
Thanks Steve. This post help me out…just the info i was needing.
anil
Thanks
Cristian
Thanks Steve, this functions is useful today!
Stamper
COOOL…sick tip, dude – just what I was looking for and worked like a charm!
Stamper
Hey dude – how would I get around the fact that ALL of my thumbnails are 16:9, but some of my videos are strange resolutions? The posters work, they just tile (vertically, generally, as some of my movies are more SD than anything).
Is it possible to center the poster and expand it to fill 100% of the height or width, whichever comes last?
Either way, still a great and useful tip!
Steve
I’m not sure if there’s a native way to specify how poster frames should be positioned/sized, but you could use the wp_video_shortcode filter to alter the output and fake the desired effect (perhaps using pseudo-elements with background images and
background-size: cover;?)If you find a more native way to do it, I’d love to hear it!
Renan
Where a put this code? I can’t find this line “wp_video_shortcode.
Thanks!
Steve
wp_video_shortcodeis an internal WordPress function that you’ll be calling from within your theme. The block of code in this post would be added into your theme’s functions.php file.Asher Black
This is nice, Mr. Grunwell. I wish WordPress would enable poster image as a feature for external embeds (like from S3). Question about something you said…”we can inject the post thumbnail as a poster image if the attribute hasn’t already been set”: To your knowledge, can we set a poster image in a straight up embed for an external url? E.g. something like this? https://video.sicnoticias.pt/sicnot/2011-05-21/08adc5b9-7453-46bd-9dea-c5f9d772b08d_2011-05-21-autocaravanas.mpg/net
Steve
how about iframe video .. like mixdrop, gounlimited.
How to call the short code for iframe..
new to this stuff, Kindly help