Barmer Fractal

Figure Video: External 

<figure class="m-figure-video figure-video--external js-external-video-init">

    <h2 class="figure-video__headline figure-video__headline--h2">
        Ein Medienmodul mit einem YouTube-Video
    </h2>

    <div class="figure-video__consent">
        <div class="m-consent a-richtext richtext--article ">
            <h2>Externe Inhalte anzeigen</h2>
            <p>Sie können sich an dieser Stelle externe Inhalte anzeigen lassen.</p>
            <p>Ich bin damit einverstanden, dass personenbezogene Daten an Drittplattform übermittelt werden. Mehr dazu in unserer <a class="bm-richtext-link" href="#">Datenschutzerklärung</a>.</p>

        </div>

    </div>

    <template class="figure-video__template">
        <div class="a-video video--embed">
            <iframe src="https://www.youtube-nocookie.com/embed/BGam1KihgbI" title="YouTube video playe" frameborder="0" allow="" allowfullscreen></iframe>
        </div>

    </template>

    <figcaption class="figure-video__figcaption ">
        <p>Beim Medienmodul mit einem externen Video verhält es sich nicht anders als beim internen Video: auch hier kommt die Bildunterschrift aus dem Detailtext des Mediamoduls.</p>
        <p>Auch hier kann die Barmer noch mehr Text reinschreiben – ganz nach Gusto.</p>
    </figcaption>

</figure>

<div class="figure-video__toggle">
    <label class="a-toggle js-consent-toggle" for="toggle-checkbox">
        <span class="toggle__text-label">Externe Inhalte zulassen</span>
        <input class="toggle__checkbox" type="checkbox" id="toggle-checkbox" />
        <span class="toggle__slider" data-text-enabled="ja" data-text-disabled="nein">
            <span class="toggle__indicator"></span>
        </span>
        <span class="sr-only toggle__alert" aria-live="polite" data-text-checked="Externe Inhalte sind jetzt zugelassen" data-text-unchecked="Externe Inhalte sind jetzt geblockt"></span>
    </label>

</div>
 
<figure class="m-figure-video {{viewtypes.specifier}}">

  {{# switches.hasHeadline }}
    <h2 class="figure-video__headline {{viewtypes.headlineSpecifier}}">
      {{content.headline}}
    </h2>
  {{/switches.hasHeadline}}

  {{# switches.hasConsentWithoutToggle }}
    <div class="figure-video__consent">
      {{ render '@consent--without-toggle' partials.consent merge=true}}
    </div>
  {{/switches.hasConsentWithoutToggle}}

  {{# switches.hasEmptyVideoTemplate }}
    <template class="figure-video__template"></template>
  {{/switches.hasEmptyVideoTemplate}}

  {{# switches.hasVideoTemplate }}
    <template class="figure-video__template">
      {{ render (stringToPartial partials.video) this.partials.videoTemplate merge=true }}
    </template>
  {{/switches.hasVideoTemplate}}

  {{# switches.hasVideo }}
    {{ render (stringToPartial partials.video) this.partials.videoTemplate merge=true }}
  {{/switches.hasVideo}}

  {{# switches.hasFigcaption }}
    <figcaption class="figure-video__figcaption {{viewtypes.figcaptionSpecifier}}">
      {{{ content.captionText }}}
    </figcaption>
  {{/ switches.hasFigcaption }}

</figure>

{{#switches.hasConsentWithoutToggle}}
  <div class="figure-video__toggle">
    {{render '@formelement-toggle--third-party-consent-manager' partials.toggle merge=true}}
  </div>
{{/switches.hasConsentWithoutToggle}}
 
{
  "switches": {
    "hasHeadline": true,
    "hasConsentWithoutToggle": true,
    "hasEmptyVideoTemplate": false,
    "hasVideoTemplate": true,
    "hasVideo": false,
    "hasFigcaption": true
  },
  "viewtypes": {
    "specifier": "figure-video--external js-external-video-init",
    "headlineSpecifier": "figure-video__headline--h2",
    "figcaptionSpecifier": ""
  },
  "content": {
    "headline": "Ein Medienmodul mit einem YouTube-Video",
    "captionText": "<p>Beim Medienmodul mit einem externen Video verhält es sich nicht anders als beim internen Video: auch hier kommt die Bildunterschrift aus dem Detailtext des Mediamoduls.</p><p>Auch hier kann die Barmer noch mehr Text reinschreiben – ganz nach Gusto.</p>"
  },
  "partials": {
    "consent": {},
    "video": "video--external",
    "videoTemplate": {},
    "toggle": {}
  }
}

No notes defined.