Popup Video nur einmal zeigen
Erstbesucher einmal ein Pop-up anzeigen und auf Bestätigung des Besuchers wird e dauerhaft ausgeblendet
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<link rel="stylesheet" href="/css_webseite/animate.css">
<style>
#animationSandbox{
height:395px;
width:504px;
position:fixed;
top:10px;
left:calc(50% - 100px);
display:none;
overflow:hidden;
background:#123456;
border:2px solid black;
backface-visibility: hidden;
line-height: 1;
color: #f35626;
}
#XX{
height:30px;
width:20px;
font-size:20px;
color:white;
background:red;
border:1px solid black;
cursor:pointer;
}
#XX:hover{
color:green;
background:black;
}
#line1{
display:flex;
}
#ueber{
width:calc(100% - 2px);
display:block;
border:1px solid red;
text-align:center;
}
#mehrinfo{
font-size:24px;
width:100%;
animation:lauf 3s linear infinite;
overflow:hidden;
}
@keyframes lauf{
0%{
margin-left:-100px;
}
100%{
margin-left:100%;
}
}
</style>
<div id="animationSandbox" class="popupanimate modal">
<div id="line1">
<span id="XX">X</span>
<span id="ueber">Überschrift / Bzw Titel</span>
</div>
<div id="basti1012"></div>
<button id="popkill">Video nicht mehr zeigen</button>
<span id="mehrinfo">Lauftext</span>
</div>
<div id="info"></div>
<script>
animation=["fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInRight","fadeInUp","flip","flipInX","flipInY","lightSpeedIn","pulse","rubberBand","shake","wobble","swing","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","rollIn","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpLeft"];
var animationausgewahlt=animation[6]; // 0 = fadeIn 1= fadeInDow usw..
var uberschrift='Überschrift des Popups';
var lauftext='Ab December neu';
var cname='moviestreamvideopopup';//speichername des Cookies. Nicht mehr ändern
var cvalue='30112015';// wenn cokkie überschrieben werden soll hier neuen wert eingeben. Zbdatumohne punkte
var exdays=365;//wie lanhge soll der Cookie gespeichert werden
//bei fragen oder probleme bei basti1012 melden
function testAnim(x) {
$('.modal').css('display','block');
$('#ueber').html(uberschrift);
$('#mehrinfo').html(lauftext);
setTimeout(function(){
los=document.createElement('iframe');
los.id='videoiframe';
los.style.border='2px solid red';
los.src='media/dreamscapes.mp4';
los.width='500px';
los.height='330px';
document.getElementById("basti1012").appendChild(los);
},1000);
$('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}
jQuery(document).ready(function () {
var username = getCookie(cname);
if (username != "") {
if(username==cvalue){
}else{
weiter();
}
}else{
weiter()
}
function weiter(){
$('#info').html('öffne popup video');
var anim = animationausgewahlt;
testAnim(anim);
setCookie(cname, cvalue, exdays);
}
});
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
$('#popkill,#XX').click(function(){
$('#animationSandbox').css('display','none');
$('#videoiframe').remove();
})
</script>