Echo Snippet

Kick 'n'Dirty



CSS 8 DNS 1 SQL 1 ajax 1 apache 3 bash 11 convert 3 crontab 2 css 1 error 1 fail2ban 2 gogs 1 grav 1 htaccess 3 html 13 ip 8 iptables 2 js 6 mail 2 nano 2 netatmo 1 php 42 php4 1 php5 2 php7 1 plex 1 powershell 1 regex 1 rss 3 secu 1 shell 25 ssl 2 stylus 3 tls 1 windows 1 youtube 2

.

Youtube embed

Youtube embed

<div class="youtube-container">
   <div class="youtube-player" data-id="VIDEOID"></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&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
</script>

<style>
.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.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; }
</style>

youtube html

<iframe width="100%" height="812" src="https://snippet.echosystem.fr?embed=5523bc9d1a35c" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 07/04/2015

Flux RSS de cette page


Echo Snippet 1.84 par Bronco - Page générée en 0.005 s