terça-feira, 20 de outubro de 2015

Responsive youtube video com lazy event on click

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
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

2 comentários:

go1aba disse...

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

Myblogger SEO disse...

Disponha faça bom uso amigo

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner