sexta-feira, 18 de setembro de 2015

Youtube video responsive Code


how-to-add-youtube-embed-video-responsive



Hoje vamos mostrar aqui como instalar youtube video responsive no seu blogger, youtube é um site que tem muito valor para aqueles que desejam adicionar um video no seu blog isso é realmente muito bom mas para isso é preciso que seu video seja responsive imagine o usuário acessando seu blog por meio de smartphone e outros dispositivos móveis, se seu video não for responsive isso certamente vai prejudicar o seo de seu blogger para isso se faz necessário usar códigos especificos para que o video funcione de uma forma correta para isso vamos ao passo de implementação no seu blogger

Para Adicionar  siga os passos abaixo:

Faça login no seu blogger no menu clique em modelo 
depois em  >>> editar htlm com as teclas combinadas CTRL+F 
busque pelo código ]]></b:skin>   e logo acima disso copie o código Css abaixo e cole antes 


CSS

.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}


Agora antes de </body>  cole o seguinte código abaixo

<script type='text/javascript'> //<![CDATA[ // Youtube Responsive setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3); //]]> </script>


Feito isso salve o modelo.

vá em criar novo post  e ao lado escrever html  clique em html como mostra a figura 

html-5-how-to-embed-youtube-responsive-video

Então copie esse código e cole 

<div class="videoyoutube"> <div class="video-responsive"> <div class="video-youtube loader" data-src="
   aqui vai o link do video a ser copiado ">
 </ Div>
 </ Div>
 </ Div> 

Em seguida va para youtube escolha o video clique em embed copie o código como mostra a figura abaixo e cole no texto marcado em amarelo 
responsive-blogger-youtube-embed

Então depois do texto formatado e o video no seu devido lugar clique em publicar. Créditos AD

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