phpwcms Support Forum

Code: Select all

<div class="col-md-12">
	[TITLE]<h3>{TITLE}</h3>[/TITLE]
	[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
	<div class="youtube-container">
		<div class="youtube-player" data-id="[HTML]{HTML}[/HTML]"></div>
	</div>
</div>

<script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();

function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}

function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&rel=0&autohide=1&border=0&wmode=opaque&enablejsapi=1&controls=1&showinfo=1");
    iframe.setAttribute("frameborder", "0");
     iframe.setAttribute("allowfullscreen", "true"); /*added fullscreen*/
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
</script>
<!-- CSS:
.youtube-container {
	display: block;
	margin: 20px auto;
	width: 100%;
	max-width: 100%;
}
.youtube-player {
	display: block;
	width: 100%; /* assuming that the video has a 16:9 ratio */
	padding-bottom: 56.25%;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	cursor: hand;
	cursor: pointer;
	display: block;
}
img.youtube-thumb {
	bottom: 0;
	display: block;
	left: 0;
	margin: auto;
	max-width: 100%;
	width: 100%;
	position: absolute;
	right: 0;
	top: 0;
	height: auto
}
div.play-button {
	height: 72px;
	width: 72px;
	left: 50%;
	top: 50%;
	margin-left: -36px;
	margin-top: -36px;
	position: absolute;
	background: url("http://i.imgur.com/TxzC70f.png") no-repeat;
}
#youtube-iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
-->