Inline Youtube Video
Youtub link mit einer css classe "youtube-play" in ein iFrame umwandeln
Java Script
https://www.youtube.com/watch?v=qQMBQeFmJIk
//youtub link classe youtube-play in ein iFrame umwandeln
$(window).load(function(){
$('.youtube-play').click();
});
$(function() {
$('a.youtube-link').each(function() {
var yt_url = this.href,
yt_id = yt_url.split('?v=')[1],
yt_title = $(this).text();
$(this).replaceWith('<div class="youtube-box" style="background-image:url(https://img.youtube.com/vi/' + yt_id + '/0.jpg);"><span class="youtube-title">' + yt_title + '</span><span class="youtube-bar"><span class="yt-bar-left"></span><span class="yt-bar-right"></span></span><span class="youtube-play">Video ansehen</span></div>');
$('div.youtube-box').click(function() {
$(this).replaceWith('<iframe class="youtube-frame" id="video1" src="https://www.youtube.com/embed/' + yt_id + '"></iframe>');
});
});
});
//youtub link classe youtube-play in ein iFrame umwandeln
CSS
/*VIDEO LINK ALS IFRAME*/
.youtube-box,
.youtube-frame {
display:block;
width:100%; /* video width */
height:25em; /* video height */
background-color:black;
position:relative;
border:none;
margin:1em auto;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.youtube-box span {
display:block;
position:absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
}
.youtube-box .youtube-title {
background-color:rgba(0,0,0,1);
font:bold 15px Verdana,Arial,Sans-Serif;
color:white;
text-shadow:0px 1px 2px black;
bottom:auto;
line-height:30px;
height:30px;
overflow:hidden;
padding:0px 15px; display: none;
}
.youtube-box .youtube-bar {
background: #000;
height:35px;
top:auto;
}
.youtube-box .youtube-bar .yt-bar-left {
background: #FFF;
}
.youtube-box .youtube-bar .yt-bar-right {
background: #FFF;
}
.youtube-box .youtube-play {
cursor:pointer;
width:220px;
height:1.4em;
padding: 1em ;
top:50%;
left:50%;
margin:-1.4em 0px 0px -110px;
background: #999;
color: #fff;
text-align: center;
text-transform: none;
}
.youtube-box .youtube-play:hover {
background-color: #000;
}
@media screen and (max-width:480px) {
.youtube-box,.youtube-frame {height:15em;}
}
