<!-- Responsive iframe with params and no thumbnail -->
<div
    data-service="youtube"
    data-id="dQw4w9WgXcQ"
    data-params="autoplay=1&mute=1"
    data-thumbnail=""
    data-autoscale>
</div>

<!-- Responsive iframe with auto thumbnail + iframe parameters -->
<div
    data-service="youtube"
    data-id="lpe3NgZxQxs"
    data-params="start=21&mute=1"
    data-autoscale>
</div>

<!-- iframe with vertical aspect ratio -->
<div
    data-service="youtube"
    data-id="G5hasDJ4-EU"
    data-ratio="9:16">
</div>

<!-- Responsive iframe with title + custom thumbnail -->
<div
    data-service="googlemaps"
    data-id="!1m18!1m12!1m3!1d2427.818692665518!2d13.373612276752306!3d52.51862017206085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a851c741ee506d%3A0x641b52d3abf17de5!2sReichstag%20Building!5e0!3m2!1sen!2sit!4v1684834981984!5m2!1sen!2sit"
    data-title="Reichstag - Germany"
    data-thumbnail="../assets/berlin_reichstag_west_panorama.jpg"
    data-autoscale>
</div>

<!-- Responsive iframe with title + custom thumbnail -->
<div
    data-service="twitch"
    data-id="channel=bdougieYO"
    data-title="Random twitch stream"
    data-thumbnail="../assets/twitch-purple_large.jpg"
    data-autoscale >
</div>

<!-- Responsive iframe with auto thumbnail -->
<div
    data-service="dailymotion"
    data-id="x81z2r8"
    data-title="When a Model meets a Painter"
    data-autoscale>
</div>

<div
    data-service="vimeo"
    data-id="193020509"
    data-ratio="2:1"
    data-autoscale>
</div>