iframe_single_optin
Version:
Single opt-in for iframe resources like google maps, youtube and vimeo.
84 lines (73 loc) • 3.22 kB
HTML
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example: Override language</title>
<style>
body {
font-family: sans-serif;
margin: 1em;
}
.isoi {
margin-top: 1em;
}
.caption {
margin-top: 0.5em;
}
@media (min-width: 50rem) {
body {
width: 70vw;
margin-left: auto;
margin-right: auto;
}
.narrow {
width: 50vw;
margin-left: auto;
margin-right: auto;
}
}
</style>
<link rel="stylesheet" href="css/iframe-single-opt-in.css">
</head>
<body>
<div class="isoi isoi--dark isoi--ratio isoi--16by9" id="abtd"></div>
<div class="caption">
<a href="https://vimeo.com/15325822">Queen - Another One Bites The Dust (Live)</a> from <a href="https://vimeo.com/mutajen">mutajen</a> on <a href="https://vimeo.com">Vimeo</a>.
</div>
<div id="bp" class="isoi isoi--dark isoi--ratio isoi--16by9"></div>
<div class="caption">Buckingham Palace on Google Maps</div>
<script src="js/iframe-single-opt-in.js"></script>
<script>
new IframeSingleOptIn(
document.querySelector("#abtd"),
'vimeo',
`<iframe src="https://player.vimeo.com/video/15325822" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>`,
false,
{
titleText: 'Queen: Another one bites the dust',
infoText: 'Maybe Queen makes you emotional, so we have to warn you before you load the stuff ;-)',
serviceUrlText: '',
showText: 'Let\'s rock'
}
);
let languageDeDu = {
titleTextMap: "Wir benötigen Deine Zustimmung für {SERVICE_NAME}",
serviceUrlText: "Datenschutzerklärung: {SERVICE_URL}",
showTextMap: "Zeig mir die Karte!",
infoTextMap: "Wir verwenden {SERVICE_NAME}. Ein Drittanbieter, um Karteninhalte einzubetten. Dieser Service kann Daten zu Deinen Aktivitäten sammeln. Bitte lese die Details durch und stimme der Nutzung zu, um die Karte anzuzeigen."
};
new IframeSingleOptIn(
document.querySelector("#bp"),
"googlemaps",
`%3Ciframe%20src%3D%22https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%3Fpb%3D%211m18%211m12%211m3%211d2349.708832214125%212d-0.1427040218788837%213d51.50125078933144%212m3%211f0%212f0%213f0%213m2%211i1024%212i768%214f13.1%213m3%211m2%211s0x48760520cd5b5eb5%253A0xa26abf514d902a7%212sBuckingham%2520Palace%215e1%213m2%211sde%212sde%214v1604606306208%215m2%211sde%212sde%22%20width%3D%22600%22%20height%3D%22450%22%20frameborder%3D%220%22%20style%3D%22border%3A0%3B%22%20allowfullscreen%3D%22%22%20aria-hidden%3D%22false%22%20tabindex%3D%220%22%3E%3C%2Fiframe%3E`,
true,
{
language: {
deDu: languageDeDu
}
}
);
</script>
</body>
</html>