terça-feira, 12 de julho de 2016

Jquery Embed youtube With Defer Iframe Responsive


youtube-defer-iframe-responsive-embed

Hoje vamos apresentar um código Jquery para fazer o carregamento adiantado de um video no youtube isso é muito util uma vez que isso também é responsive e vai otimizar o tempo do carregamento do Video no Blogger para tanto você precisa seguir os passos afim de adicionar Jquery o que vai carregar mais rápido o video para visitantes e também se ajusta o zoom adequado para dispositivos móveis



Para adicionar Jquery Embed youtube with defer Iframe responsive

Faça login no Blogger no painel do blogger va no menu modelo editar HTML/JavaScript
com as teclas combinadas CTRL+F busque por :  </body> e antes disso copie e cole o seguinte código.
<b:if cond="data:blog.pageType == &quot;item&quot;">
<script type="text/javascript">
//<![CDATA[
// Resposive Youtube Script
$(document).ready(function() {
    $('iframe[src*="youtube.com"]').wrap('<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%">
</div>
');
    $('iframe[src*="youtube.com"]').css({
        "position": "absolute",
        "top": "0",
        "left": "0",
        "width": "100%",
        "height": "100%",
        "border": "0"
    });
    $('iframe[src*="youtube.com"]').each(function() {
        $(this).attr("data-src", $(this).attr("src"));
        $(this).attr("src", "")
    });
});

function init() {
    var vidDefer = document.getElementsByTagName('iframe');
    for (var i = 0; i < vidDefer.length; i++) {
        if (vidDefer[i].getAttribute('data-src')) {
            vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
        }
    }
}
window.onload = init;
//]]>
</script>
</b:if>



Não esqueça de verificar se seu Blog consta Jquery caso não tenha isso adicione o seguinte código antes de </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Pronto agora você pode adicionar qualquer video direto do youtube no blogger pelo menu inserir video do youtube.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner