Sha256: 778bf8872e75b728ac470cc83df356e47ee6080c644a35a7f7bb830a87ce172a
Contents?: true
Size: 1.48 KB
Versions: 10
Compression:
Stored size: 1.48 KB
Contents
<keppler-component>
<div class="kppl-youtube">
<iframe class="kppl-youtube-video" width="560" height="315" src="https://www.youtube.com/embed/SpaqUrNPb-4?rel=0&controls=0&showinfo=0&mute=1&autoplay=1&loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<div class="kppl-youtube-mask">
<div class="kppl-container">
<h1>Banner Youtube</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare turpis eu elit ultricies mollis. Nulla sollicitudin orci mauris, nec fermentum tortor venenatis vel</p>
</div>
</div>
</div>
<style>
.kppl-youtube {
width: auto;
height: 400px;
position: relative;
overflow: hidden;
}
.kppl-youtube .kppl-youtube-video {
height: 100%;
width: 100%;
position: absolute;
transform: scale(2);
}
.kppl-youtube .kppl-youtube-mask {
background: #00000075;
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #fff;
}
.kppl-youtube .kppl-container {
max-width: 40%;
}
</style>
</keppler-component>
<script>
'kppl-banner-youtube', {
label: 'Banner Video',
category: 'Banners',
attributes: { class:'fa fa-youtube-play' },
content: {
script: function(){}
}
}
</script>
Version data entries
10 entries across 10 versions & 1 rubygems