<div class="youtube-placeholder" id="youtube-placeholder">
    <div class="youtube-placeholder__inner"><img class="image youtube-placeholder__image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/500x300/cccaca/333333.png" />
        <div class="uc-embedding-wrapper">
            <h3 class="headline headline--headline-2">Zum Laden des Youtube-Dienstes benötigen wir Ihre Zustimmung.
            </h3>
            <div class="formatted-text">
                <p>Donec pede justo, fringilla vel, <a href="">aliquet nec, vulputate eget, arcu</a>. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
            </div>
            <div class="uc-embedding-buttons">
                <button class="button button--blue button--outline" ontouchstart="UC_UI.showSecondLayer('##ServiceId##');" onclick="UC_UI.showSecondLayer('##ServiceId##');" id="button-39a8" type="button">Mehr Informationen
</button>
                <button class="button button--blue" ontouchstart="UC_UI.acceptService('##ServiceId##');" onclick="UC_UI.acceptService('##ServiceId##');" id="button-b53a" type="button">Zustimmen
</button>
            </div>
        </div>
    </div>
</div>
<script type="text/plain" data-usercentrics="YouTube Video">
    document.getElementById('youtube-placeholder').innerHTML = ''; document.getElementById('youtube-placeholder').innerHTML += '<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com" frameborder="0" allowfullscreen=""></iframe>';
</script>
#youtube-placeholder.youtube-placeholder
  .youtube-placeholder__inner
    != include('@image', { image: image, attr: { class: 'youtube-placeholder__image' } })

    .uc-embedding-wrapper
      != include('@headline--headline-2', headline)
      != include('@formatted-text', text)

      .uc-embedding-buttons
        != include('@button', { attr: { ontouchstart: 'UC_UI.showSecondLayer(\'##ServiceId##\');', onclick: 'UC_UI.showSecondLayer(\'##ServiceId##\');' }, modifier: 'blue', outline: true, text: 'Mehr Informationen' })
        != include('@button', { attr: { ontouchstart: 'UC_UI.acceptService(\'##ServiceId##\');', onclick: 'UC_UI.acceptService(\'##ServiceId##\');' }, modifier: 'blue', text: 'Zustimmen' })

script(type='text/plain', data-usercentrics='YouTube Video').
  document.getElementById('youtube-placeholder').innerHTML = '';
  document.getElementById('youtube-placeholder').innerHTML += '<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com" frameborder="0" allowfullscreen=""></iframe>';
{
  "image": "https://via.placeholder.com/500x300/cccaca/333333.png",
  "headline": {
    "text": "Zum Laden des Youtube-Dienstes benötigen wir Ihre Zustimmung.",
    "level": 3
  },
  "text": {
    "content": "p Donec pede justo, fringilla vel, #[a(href='') aliquet nec, vulputate eget, arcu]. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.\n"
  }
}
  • Content:
    .youtube-placeholder {
      padding-top: 56.25%;
      position: relative;
    }
    
    .youtube-placeholder__inner {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }
    
    .youtube-placeholder__image {
      height: 100%;
      object-fit: cover;
      width: 100%;
    }
    
    .uc-embedding-wrapper {
      background-color: rgba(#fff, 0.95);
      display: flex;
      flex-direction: column;
      left: 50%;
      max-height: calc(100% - 3.5rem);
      max-width: calc(100% - 5rem);
      padding: 2.5rem;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
    }
    
    .embed-responsive-item {
      height: 100%;
      width: 100%;
    }
    
  • URL: /components/raw/youtube-placeholder/youtube-placeholder.scss
  • Filesystem Path: src/components/organisms/youtube-placeholder/youtube-placeholder.scss
  • Size: 607 Bytes

There are no notes for this item.