<div class="youtube-placeholder" id="youtube-placeholder">
<div class="youtube-placeholder__inner">
<div class="image-wrap"><img class="image youtube-placeholder__image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/500x300/cccaca/333333.png" />
<button class="copyright js-tooltip image__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-1ded" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-copyright"></use>
</svg>
</button>
</div>
<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-ab23" type="button">Mehr Informationen
</button>
<button class="button button--blue" ontouchstart="UC_UI.acceptService('##ServiceId##');" onclick="UC_UI.acceptService('##ServiceId##');" id="button-042c" 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"
}
}
.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%;
}
There are no notes for this item.