terça-feira, 20 de outubro de 2015

Responsive youtube video com lazy event on click

Tags

responsive-youtube-lazy-loading-on-click-event



Hoje vamos falar sobre como tornar seu vídeo responsive youtube bem como carregar o video mais rápido esse truque se faz útil para qualquer blogueiro que deseja que o video carregue mais rápido sendo que o iframe é ignorado para que o evento iframe seja carregado adicionando o parâmetro autoplay então veja como adicionar o vídeo abaixo no seu blogger com esse modo 

Print tela modelo responsive blogger youtube

youtube-responsive-video-blogger-blogspot


Para adicionar no seu blogger 

Faça login no blogger então va no menu
Modelo >> editar HTML com as teclas combinadas CTRL+F busque por </head> então copie o código abaixo e cole antes disso



<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<style type='text/css'>
/*<![CDATA[*/
.youtube{
    text-align:center;
    margin:0 auto;
    width:100%;
}
.youtube-resposive{
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    margin:0;
}
.youtube img{
    width:100%;
    height:auto;
    margin-top:-9%;
    z-index:1;
}
.youtube iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
}
.youtube-resposive:before{
    content:"\f16a";
    font-family:FontAwesome;
    font-size:400%;
    position:absolute;
    top:50%;
    left:50%;
    margin:-32px 0 0 -32px;
    cursor:pointer;
    opacity:.7;
    transition: all 0.2s ease-out;
}
.youtube-resposive:hover:before{
    color:red!important;
    opacity:1;
}
/*]]>*/
</style>
</b:if>

Esse tutorial usa uma fonte incrivel certifique se que tenha essa fonte incrivel no seu blogger salva caso não tenha copie o código abaixo e cole isso antes de </body> 

 <script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("   //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css   ");

 //]]>

 </ Script>

Em seguida tambem salve o código abaixo acima de </body>

<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<script>
//<![CDATA[
function videoPlay(anchor){
   anchor.innerHTML = anchor.innerHTML.replace('<!--','').replace('-->','');
   anchor.onclick= null;
   return false;
};
//]]>
</script>
</b:if>

Agora salve antes de sair

Para exibir o youtube responsive com o evento onclick adicione esse código a seguir em criar novo post clicando na aba html 


<div class="youtube" onclick="videoPlay(this)">
<div class="youtube-resposive">
<img alt="youtube image" src="http://i.ytimg.com/vi/qwN01jlSD8c/sddefault.jpg" width="500" height="281"/>
    <!--<iframe src="http://www.youtube.com/embed/qwN01jlSD8c?autoplay=1&autohide=1" frameborder="0" allowfullscreen="1"></iframe>-->
</div>
</div>
</div>

Não esqueça de trocar onde esta amarelo pelo embed de seu video código  salve e esta ok

Referencia: http://bloggingexperiment.com/lazy-loading-video-facebook

Blogger
Disqus
Escolha o Sistem de Comentario

2 comentários

Obrigado mesmo, lembrando que esse serve pra qualquer player !!

Balas

Disponha faça bom uso amigo

Balas