Trocando antigo player do youtube pelo novo (Erro que deu no blogger)
Oi gente, tudo bem com vocês?
Bom, já faz algum tempo que o youtube parou de dar o código de incorporação de vídeo no formato <object> porém quando a gente colocava os vídeos em nossas postagens do blogger, eles era inseridos com esse formato(a não ser que você pegasse o código no youtube e colasse pelo modo de edição html)...
Apesar de defasado o código com object ainda era funcional, mas agora com a última atualização do youtube parou de funcionar...
Se você tiver um blog com muitas postagens, como eu tenho, e tiver que ir em todas postagens com vídeos para corrigir o código errado fica impraticável o processo...
Logo a solução mais prática(apesar de não ser a melhor) é apelar pra um javascript...
Se você usar o modelo dinâmico do blog, igual eu uso, você terá que criar uma função pra colocar o código dentro e depois colocar esse código pra executar com um setInterval, porque o modelo dinâmico dá muita treta no carregamento da página...rs
A parte em roxo é a parte que eu tive que colocar pro meu código funcionar no modelo dinâmico... O problema em colocar essa parte é que ela ficará executando o código em um loop infinito...
Se você estiver usando um modelo que não seja o dinâmico, você insere esse javascript depois da área destinada à seu post, ou então antes do fechamento da tag body...
Veja abaixo o código comentado:
<script>
//<![CDATA[
//Essa tag cdata foi uma grande descoberta pra mim, antes quando fazia códigos javascript pra por em blog sempre dava erro quando colocava pra rodar, eu tinha que transformar " em " e assim por diante, pois só assim funcionava, já com o cdata tudo que estiver dentro da tag é passada para o html igual escrevermos... Antes da tag cdata existe // para que essa linha seja ignorada na hora de executar o javascript, se você quiser usar o cdata pra algum trecho de puro html você pode retirar esses traços(//).
function yt_correct(){
if(document.getElementsByTagName('object').length>0){
obj=document.getElementsByTagName('object'); //procura por elementos com tag object
for(o3=0;o3<obj.length;o3++){ //faz um loop para analisar todos elementos encontrados anteriormente
params=obj[o3].getElementsByTagName('param'); //procura elementos com tag param dentro do object que está sendo analisado no momento
for(p=0;p<params.length;p++){ //inicia loop para ler parâmetros
if(params[p].value.indexOf('youtube')!=-1){ //procura por youtube no conteúdo dos parâmetros e se encontrar executa o código abaixo
vid=params[p].value.split('/v/')[1].split('&')[0]; //pega o id do vídeo no youtube, pegando primeiro o que vem depois de /v/, pegando o resultado disso pegamos tudo que vem antes de &
iframe=document.createElement('iframe'); //cria um novo elemento iframe que substituirá o object
iframe.src='http://www.youtube.com/embed/'+vid+'?enablejsapi=1&origin='+location.href;
iframe.type='text/html';
iframe.width='320';
iframe.height='266';
iframe.style.display='block';
iframe.style.margin='0 auto';
iframe.setAttribute('frameborder','0');
//toda parte em azul é a configuração do iframe, ela irá gerar um iframe com o seguinte código <iframe src="url_do_video" type="text/html" width="320" height="266" frameborder="0" style="display:block; margin:0 auto"></iframe>
obj[o3].parentNode.insertBefore(iframe,obj[o3]); //insere o iframe que acabamos de criar antes do object que está sendo analisado no momento
obj[o3].parentNode.removeChild(obj[o3]); //remove o object, deixando apenas o iframe em seu lugar
o3--; //diminui em 1 a contagem do loop dos objects, é preciso fazer isso pois você acabou de remover um object da página, supondo que você estivesse no object 0(que é o primeiro), como você removeu ele da pagina o object 1 passará a ser o object 0, você então precisa retornar a contagem em 1 pra conseguir analisá-lo no próximo loop
}
}
}
}
};
setInterval('yt_correct()',10000);
//]]>
</script>
Bom gente, por hoje é isso, espero que vocês tenham conseguido entender o que expliquei, que consigam por em prática se estiverem com o mesmo problema que eu, e em caso de dúvidas já sabem, é só comentar...
Valeu...
Bom, já faz algum tempo que o youtube parou de dar o código de incorporação de vídeo no formato <object> porém quando a gente colocava os vídeos em nossas postagens do blogger, eles era inseridos com esse formato(a não ser que você pegasse o código no youtube e colasse pelo modo de edição html)...
Apesar de defasado o código com object ainda era funcional, mas agora com a última atualização do youtube parou de funcionar...
Se você tiver um blog com muitas postagens, como eu tenho, e tiver que ir em todas postagens com vídeos para corrigir o código errado fica impraticável o processo...
Logo a solução mais prática(apesar de não ser a melhor) é apelar pra um javascript...
Se você usar o modelo dinâmico do blog, igual eu uso, você terá que criar uma função pra colocar o código dentro e depois colocar esse código pra executar com um setInterval, porque o modelo dinâmico dá muita treta no carregamento da página...rs
A parte em roxo é a parte que eu tive que colocar pro meu código funcionar no modelo dinâmico... O problema em colocar essa parte é que ela ficará executando o código em um loop infinito...
Se você estiver usando um modelo que não seja o dinâmico, você insere esse javascript depois da área destinada à seu post, ou então antes do fechamento da tag body...
Veja abaixo o código comentado:
<script>
//<![CDATA[
//Essa tag cdata foi uma grande descoberta pra mim, antes quando fazia códigos javascript pra por em blog sempre dava erro quando colocava pra rodar, eu tinha que transformar " em " e assim por diante, pois só assim funcionava, já com o cdata tudo que estiver dentro da tag é passada para o html igual escrevermos... Antes da tag cdata existe // para que essa linha seja ignorada na hora de executar o javascript, se você quiser usar o cdata pra algum trecho de puro html você pode retirar esses traços(//).
function yt_correct(){
if(document.getElementsByTagName('object').length>0){
obj=document.getElementsByTagName('object'); //procura por elementos com tag object
for(o3=0;o3<obj.length;o3++){ //faz um loop para analisar todos elementos encontrados anteriormente
params=obj[o3].getElementsByTagName('param'); //procura elementos com tag param dentro do object que está sendo analisado no momento
for(p=0;p<params.length;p++){ //inicia loop para ler parâmetros
if(params[p].value.indexOf('youtube')!=-1){ //procura por youtube no conteúdo dos parâmetros e se encontrar executa o código abaixo
vid=params[p].value.split('/v/')[1].split('&')[0]; //pega o id do vídeo no youtube, pegando primeiro o que vem depois de /v/, pegando o resultado disso pegamos tudo que vem antes de &
iframe=document.createElement('iframe'); //cria um novo elemento iframe que substituirá o object
iframe.src='http://www.youtube.com/embed/'+vid+'?enablejsapi=1&origin='+location.href;
iframe.type='text/html';
iframe.width='320';
iframe.height='266';
iframe.style.display='block';
iframe.style.margin='0 auto';
iframe.setAttribute('frameborder','0');
//toda parte em azul é a configuração do iframe, ela irá gerar um iframe com o seguinte código <iframe src="url_do_video" type="text/html" width="320" height="266" frameborder="0" style="display:block; margin:0 auto"></iframe>
obj[o3].parentNode.insertBefore(iframe,obj[o3]); //insere o iframe que acabamos de criar antes do object que está sendo analisado no momento
obj[o3].parentNode.removeChild(obj[o3]); //remove o object, deixando apenas o iframe em seu lugar
o3--; //diminui em 1 a contagem do loop dos objects, é preciso fazer isso pois você acabou de remover um object da página, supondo que você estivesse no object 0(que é o primeiro), como você removeu ele da pagina o object 1 passará a ser o object 0, você então precisa retornar a contagem em 1 pra conseguir analisá-lo no próximo loop
}
}
}
}
};
setInterval('yt_correct()',10000);
//]]>
</script>
Bom gente, por hoje é isso, espero que vocês tenham conseguido entender o que expliquei, que consigam por em prática se estiverem com o mesmo problema que eu, e em caso de dúvidas já sabem, é só comentar...
Valeu...
Comentários
Postar um comentário