3.0.33 • Public • Published

    psammead-embed-error - Known Vulnerabilities Dependency Status peerDependencies Status Storybook GitHub license npm version PRs Welcome


    EmbedError is a lean error message component, designed for embedded content, such as that in an iframe. It will fill its parent container and can optionally fill the viewport, while positioning its content accordingly.


    npm install @bbc/psammead-embed-error --save


    Argument Type Required Default Example
    service String No news arabic
    fillViewport Boolean No false true
    message String Yes - Sorry, we can't display this content.
    link Object No null See: link.


    Argument Type Required Default Example
    text String Yes n/a View alternate content.
    href String Yes n/a https://www.bbc.co.uk/news/av-embed/a-video-about-dogs


    This component is particularly useful if you serve content in an iframe and want users to have a seamless error experience. Consider the following example:

    // An article with an iframe.
    <iframe src="https://www.bbc.co.uk/news/av-embed/a-video-about-cats"></iframe>
    // iframe content.
    import EmbedError from '@bbc/psammead-embed-error';
    const Page = () => {
      if (error) {
          message="Sorry, we can't display this content."
            text: 'View alternate content.',
            href: 'https://www.bbc.co.uk/news/article/all-about-dogs',

    Note the use of fillViewport, which ensures the error will fill the iframe in the article.

    When to use this component

    This component should be used when you want to display an error message that fills a container or viewport.

    When not to use this component

    This component should not be used to display messages other than errors.

    Accessibility notes

    This component's error message is wrapped in a <strong> element, indicating to users of assistive technology that it is an important message. This is similar behaviour to the Guidance component used in Media Player's Placeholder.


    The requirements of this component are expected to change. Developments in Mozart's error reporting will influence how (and where) this component is used in the future.


    Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at the root of the Psammead repository.

    Code of Conduct

    We welcome feedback and help on this work. By participating in this project, you agree to abide by the code of conduct. Please take a moment to read it.


    Psammead is Apache 2.0 licensed.


    npm i @bbc/psammead-embed-error

    DownloadsWeekly Downloads






    Unpacked Size

    56.5 kB

    Total Files


    Last publish


    • news-vj-bot
    • silver-jenkins
    • bbc-web-core
    • ibl-jenkins
    • iplayer-web-jenkins
    • sport-web-jenkins
    • bbcconnections
    • bbc-gnl-ci
    • bbc-morph
    • itv-ci-machine
    • audienceplatformdev
    • bbc-archivesearch-development-team
    • sounds-web-jenkins
    • rmsdev
    • bbc-voice-pipeline
    • weather-jenkins
    • newslabs-jenkins
    • api-management-jenkins
    • mdtbuild
    • bbc-online
    • cps-support
    • bbc-cd-jenkins
    • locator-deploy
    • bbc-isite
    • travel-jenkins
    • participation-jenkins
    • bbc-news-jenkins
    • bbcrd
    • ibl
    • iplayerradio-aws
    • media-playout-jenkins
    • partner-platform-jenkins
    • bbc-admin
    • gel-jenkins
    • pcs-amp-jenkins
    • education-jenkins
    • insyn-jenkins
    • kite-jenkins
    • bbcrd-artifactory
    • iplayer-pc-downloads-pipeline-bot