Barmer Fractal

Overview Videos 

<article class="p-article">
    <div class="o-textmodule">
        <h3 class="textmodule__headline textmodule__headline--h1">Externes Video in Textmodul</h3>
        <div class="a-richtext richtext--article">
            <p>Richtext in Article. We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
            <p>Richtext in Article. We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
            <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>

        </div>
    </div>
</article>

<article class="p-article article--narrow-measure">
    <div class="o-article-content">
        <h3 class="textmodule__headline textmodule__headline--h1">Externes Video in Artikel/Narrow Measure</h3>
        <div class="a-richtext richtext--article">
            <p>Richtext und Narrow-Measure in Article. We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
            <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>

        </div>
    </div>
</article>

<article class="p-article">
    <div class="o-article-content">
        <h3 class="textmodule__headline textmodule__headline--h1">Externes Video in Artikel, ohne Einbettung in Textmodul</h3>
        <div class="a-richtext richtext--article">
            <p>Richtext in Article, aber außerhalb eines Textmoduls. We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
            <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>

        </div>
    </div>
</article>

<figure class="m-figure-video figure-video--internal">

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

    <video class="a-video" controls>
        <source src="../../videos/barmer-video-stark-8x3.mp4" type="video/mp4">
        <p>Video tag fallback content</p>
    </video>

    <figcaption class="figure-video__figcaption ">
        <p>Diese Bildunterschrift kommt aus dem Detailtext des Mediamoduls und dient der Beschriftung dieses internen Videos.</p>
        <p>Aber dies ist nur ein Serviervorschlag und der Barmer steht es frei, andere handelsübliche Texte einzugeben.</p>
    </figcaption>

</figure>

<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>

<div class="o-slider glide js-slider-init slider--video-and-topics js-teaser-targeting-init" data-slider-type="video-and-topics" data-glide-config="{&quot;autoplay&quot;: 10000 }">

    <h2 class="slider__headline slider__headline--h3">Viele Extraleistungen für jede Lebensphase ich bin ein lange lange lange lange Headline</h2>

    <div class="slider__detailtext">

        <p>Die BARMER bietet Ihnen mit ihrer Krankenversicherung einen umfassenden Gesundheitsschutz und ist mit rund 9 Millionen Versicherten in Deutschland ein starker Partner für alle Fragen zur Gesundheit</p>
    </div>

    <div class="slider__area">

        <div class="slider__track-wrapper">

            <div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
                <button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
                <button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
            </div>

            <div class="slider__track glide__track slider__track--video-and-topics" data-glide-el="track">
                <ul class="glide__slides slider__slides--video-and-topics" aria-label="Karusell mit 3 Elementen">
                    <li class="glide__slide slider__slide--video-and-topics">

                        <div class="o-teaser teaser--video-and-topics">

                            <div class="teaser__image">

                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg">
                                    <img src="../../images/16x9/960/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg" alt="" loading="lazy">
                                </picture>

                                <button class="a-btn btn--play js-modal-trigger" type="button" data-video-type="internal" data-video-id="1" data-video-src="../../videos/barmer-video-stark-8x3.mp4" aria-label="Berufstätige Video abspielen" aria-controls="bm-video"><i class="a-icon icon--play" aria-hidden="true"></i></button>

                                <template id="video-template-1">
                                    <video class="a-video" controls>
                                        <source src="../../videos/barmer-video-stark-8x3.mp4" type="video/mp4">
                                        <p>Video tag fallback content</p>
                                    </video>

                                </template>
                            </div>

                            <h4 class="teaser__headline">
                                Berufstätige

                            </h4>

                            <div class="teaser__text">
                                Mit flexibler Vorsorge und Therapie leistungsstark aufgehoben sein

                            </div>

                        </div>

                    </li>
                    <li class="glide__slide slider__slide--video-and-topics">

                        <div class="o-teaser teaser--video-and-topics">

                            <div class="teaser__image">

                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
                                    <img src="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg" alt="" loading="lazy">
                                </picture>

                                <button class="a-btn btn--play js-modal-trigger" type="button" data-video-type="external" data-video-id="2" data-video-src="https://www.youtube.com/embed/hItuak56cqg" aria-label="Familien Video abspielen" aria-controls="bm-video"><i class="a-icon icon--play" aria-hidden="true"></i></button>

                                <template id="video-template-2">
                                    <div class="a-video video--embed">
                                        <iframe src="https://www.youtube.com/embed/hItuak56cqg" title="YouTube video playe" frameborder="0" allow="" allowfullscreen></iframe>
                                    </div>

                                </template>
                            </div>

                            <h4 class="teaser__headline">
                                Familien

                            </h4>

                            <div class="teaser__text">
                                Mit umfassendem Gesundheitsschutz und vielen Extras die ganze Familie krankenversichern

                            </div>

                        </div>

                    </li>
                    <li class="glide__slide slider__slide--video-and-topics">

                        <div class="o-teaser teaser--video-and-topics">

                            <div class="teaser__image">

                                <picture class="a-picture ">
                                    <source media="(max-width: 640px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
                                    <source media="(min-width: 641px)" srcset="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg">
                                    <img src="../../images/16x9/960/eltern-toben-mit-ihrem-sohn-im-wohnzimmer.jpg" alt="" loading="lazy">
                                </picture>

                                <button class="a-btn btn--play js-modal-trigger" type="button" data-video-type="external" data-video-id="3" data-video-src="https://www.youtube.com/embed/BGam1KihgbI" aria-label="Studierende Video abspielen" aria-controls="bm-video"><i class="a-icon icon--play" aria-hidden="true"></i></button>

                                <template id="video-template-3">
                                    <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>
                            </div>

                            <h4 class="teaser__headline">
                                Studierende

                            </h4>

                            <div class="teaser__text">
                                Mit umfassendem Gesundheitsschutz und vielen Extras die ganze Familie krankenversichern

                            </div>

                        </div>

                    </li>
                </ul>
            </div>

        </div>

    </div>

    <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>
 
<article class="p-article">
  <div class="o-textmodule">
    <h3 class="textmodule__headline textmodule__headline--h1">Externes Video in Textmodul</h3>
    <div class="a-richtext richtext--article">
      <p>Richtext in Article. We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
      <p>Richtext in Article. We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
      {{ render '@figure-video--external' merge=true }}
    </div>
  </div>
</article>

<article class="p-article article--narrow-measure">
  <div class="o-article-content">
    <h3 class="textmodule__headline textmodule__headline--h1">Externes Video in Artikel/Narrow Measure</h3>
    <div class="a-richtext richtext--article">
    <p>Richtext und Narrow-Measure in Article. We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
      {{ render '@figure-video--external' merge=true }}
    </div>
  </div>
</article>

<article class="p-article">
  <div class="o-article-content">
    <h3 class="textmodule__headline textmodule__headline--h1">Externes Video in Artikel, ohne Einbettung in Textmodul</h3>
    <div class="a-richtext richtext--article">
      <p>Richtext in Article, aber außerhalb eines Textmoduls. We need to touch base off-line before we fire the new ux experience my grasp on reality right now is tenuous and my supervisor didn't like the latest revision you gave me can you switch back to the first revision? yet game-plan, nor weaponize the data. We need to start advertising on social media. Usability this vendor is incompetent or crisp ppt but knowledge is power. Root-and-branch review vertical integration, but personal development but window-licker, yet a set of certitudes based on deductions founded on false premise but core competencies.</p>
      {{ render '@figure-video--external' merge=true }}
    </div>
  </div>
</article>



{{ render '@figure-video--internal' merge=true }}


{{ render '@figure-video--external' merge=true }}


{{ render '@slider--video-and-topics-with-video-teaser' partials.videoSlider1 merge=true }}
 
{
  "switches": {
    "hasContactFlyout": "true"
  },
  "content": {
    "alertText": "Die Sitzung wurde erfolgreich verlängert"
  },
  "partials": {
    "sessionMetadata": {
      "content": {
        "expiredDialogId": "bm-dialog-session-expired",
        "expiringDialogId": "bm-dialog-session-expiring"
      }
    },
    "expiring": {
      "switches": {
        "hidden": true,
        "secondaryButton": true
      },
      "content": {
        "id": "bm-dialog-session-expiring",
        "text": "In <span class=\"js-session-timer\">5</span> Minuten endet ihre Sitzung und Sie werden automatisch ausgeloggt."
      },
      "partials": {
        "primaryButton": {
          "content": {
            "label": "Login verlängern"
          }
        },
        "secondaryButton": {
          "content": {
            "label": "Logout"
          }
        }
      }
    },
    "expired": {
      "switches": {
        "hidden": true
      },
      "content": {
        "id": "bm-dialog-session-expired"
      }
    },
    "modalVideo": {
      "switches": {
        "hidden": true
      },
      "content": {
        "id": "bm-video"
      },
      "viewtypes": {
        "specifier": "modal--video"
      },
      "partials": {
        "consent": {
          "viewtypes": {
            "specifier": "consent--in-modal"
          }
        },
        "videoFigure": {
          "switches": {
            "hasHeadline": false,
            "hasFigcaption": false,
            "hasVideo": false
          }
        }
      }
    }
  }
}

No notes defined.