Didn't make the #ChromeDevSummit this year? Catch all the content (and more!) in the Chrome Dev Summit 2019 playlist on our Chrome Developers YouTube Channel.

Using poster images on plugin content

Several weeks ago, Chrome announced a new content setting that automatically pauses plugin content that it detects to be peripheral to the main content of the site will go live to all users of Chrome 45 onwards (Stable September 2015). This is a win for your users in terms of CPU usage and power consumption, but may result in their not seeing the full content that your website provides.

Luckily, the setting also respects the poster parameter in a similar way that video elements do. This allows you to specify an image that should be used in place of the paused plugin, instead of whichever frame Chrome pauses your plugin content on.

Here’s an example of using it in practice. If Chrome decides to pause flash.swf, poster.png will be shown in its place. If the user clicks on the poster than the Flash content will play like normal.

<object data="http://example.com/flash.swf"  
        type="application/x-shockwave-flash"
        poster="poster.png">
</object>

The value of the poster parameter is interpreted the same way as the srcset attribute of an img tag, so it can support high-DPI displays as well. Here’s an example of the srcset syntax:

<object data="http://example.com/flash.swf"  
        type="application/x-shockwave-flash"
        poster="snapshot1x.png 1x, snapshot2x.png 2x">
</object>

It's important that the image used is the same dimensions as the plugin content - otherwise, the image could end up distorted on the user's screen

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!