Colocar Vários Vídeos do Youtube no Site ou Blog

Postar mais de um vídeo no blog pode ser um problema por dois motivos: ocupa muito espaço na pagina e faz demorar mais para carregar seu blog. Mas é possível resolver isso com uma alteração no código e assim poder mostrar quantos vídeos do youtube quiser no mesmo espaço e sem precisar carregar todos junto com a sua pagina, ou seja, deixando o blog mais rápido. Podemos fazer isso criando uma lista de links para abrir os outros vídeos do youtube dentro do seu blog sem precisar carregar novamente a pagina ou sair do seu blog.

O primeiro para colocar os vídeos no blog é pegar o código no youtube, você só precisa clicar no botão compartilhar e depois incorporar. Não marque a opção: Usar código de incorporação antigo, o código do youtube é mais ou menos assim:

<iframe width="420" height="290" src="http://www.youtube.com/embed/8mchIk6sYHU?rel=0" frameborder="0" allowfullscreen></iframe>

pegar códigos de videos do youtube

Copie os códigos de todos os vídeos que desejar usar no seu blog e cole no bloco de notas. Agora que já temos os códigos para incorporar os vídeos do youtube, veja o código abaixo:

<center>
<p><a href="http://www.youtube.com/embed/8mchIk6sYHU?rel=0" target="janela">Como hospedar imagens e criar a caixinha link-me</a></p>
<p><a href="http://www.youtube.com/embed/8RGx6GYJ8WI?rel=0" target="janela">Photoshop Online Grátis</a></p>
<p><a href="http://www.youtube.com/embed/wwoLe0cw3c0?rel=0" target="janela">Criar banners online grátis </a></p>
<p><iframe name="janela" width="420" height="290" src="http://www.youtube.com/embed/8mchIk6sYHU?rel=0" frameborder="0" allowfullscreen></iframe></p>
</center>

O funcionamento dele é bem simples veja que a linha do iframe é praticamente igual a todos que copiou do youtube a única diferença é que adicionamos o trecho name="janela" isto é um nome deste iframe. Então use nesta parte o vídeo que deseja que apareça quando o blog for carregado.

Agora vamos para os links dos outros vídeos do Youtube: veja que as outras linhas são praticamente todas iguais apenas alterando o texto (Como hospedar imagens e criar a caixinha link-me) e endereço do vídeo (http://www.youtube.com/embed/8mchIk6sYHU?rel=0) que é o mesmo do iframe. Ou seja, crie uma linha dessas para cada link de vídeo que deseja abrir no seu blog. Colocando o texto e também copiando o endereço do iframe no lugar do link.

<p><a href="http://www.youtube.com/embed/8mchIk6sYHU?rel=0" target="janela">Como hospedar imagens e criar a caixinha link-me</a></p>

Não altere a parte target="janela", é justamente isso que permite assistir vários vídeos sem precisa carregar novamente o seu blog ou ir para o youtube. O nome janela não é código é apenas um nome, ou seja, poderia ser qualquer outra coisa desde que esteja exatamente igual na parte dos links e do iframe.

Caso queira usar imagens para linkar os vídeos o código ficaria assim:

<p><a href="http://www.youtube.com/embed/8mchIk6sYHU" target="janela"><img src="endereço da imagem" border="0" /></a></p>

Usamos vídeos do youtube, mas isso funciona para qualquer outra coisa que use iframe. Veja a demonstração de como assistir vários vídeos sem precisar trocar de pagina logo abaixo.

Como hospedar imagens e criar a caixinha link-me

Photoshop Online Grátis

Criar banners online grátis


Depois é só colocar o código na postagem do seu blog ou até mesmo em um gadget de html/javascript. Mas quando for criar seu post veja se as opções de postagem estão em Interpretar HTML digitado senão o blogger pode mostrar o código em vez de executar.
configurações das postagens do blogger

Outras dicas para melhorar seu blog:
Fazer um Blog mais Rápido
Quais os Gadgets, Widgets e Acessórios mais úteis para Blogs?
Video Aula: Colocar musica no blog
Denunciar conteúdo ilegal ao blogger

Achamos que essa é uma boa opção para colocar uma lista de vídeos no blog sem fazer o blog ficar lento, afinal ninguém gosta de ficar muito tempo esperando uma pagina carregar e não podemos correr o risco de perder visitas por causa do excesso de conteúdo.

55 comentários:

  1. Muito Legal o post e valeu pelos comentários respondidos

    ResponderExcluir
  2. Tem como fazer isso com outros elementos?
    ex.: imagem, share e etc

    ResponderExcluir
  3. Fabiano, tive a ideia de criar um site(q na verdade eh um blog) ...de busca, mas a principal coisa dele eh fazer as buscas somente nos blogs do jogo GTA, assim eu coloquei um widget de lista de links com os blogs q eu quero q pesquise, depois eu add a caixa de pesquisa ligada somente a lista de links q eu coloquei... mas msm assim, na hora de pesquisar qualquer palavra, nao consegue encontrar nenhum resultado...
    Qual eh o problema? e oq eu poderia fazer?

    ResponderExcluir
  4. Luizfelipe☠○
    com imagens funciona.... é só usar os endereço das imagens, mas com outras coisas não testei, mas deve funcionar com flash (.swf) também

    ResponderExcluir
  5. Jűηϊσr_Ðjjr〆
    despende de como configurou a pesquisa

    no adsense tem pesquisa para conteudo, lá você pode escolher em quais sites vai pesquisar.

    ResponderExcluir
  6. Muito bom Fabiano, eu estou realmente precisando de colocar os vídeos dessa forma.
    obrigada.

    ResponderExcluir
  7. Tem como fazer um blogger nevar assim http://zanessasweetheart.blog38.fc2.com/blog-date-201010.html

    ResponderExcluir
  8. Fabiano, vc sabe como colocar um link para que os leitores do blog possam recomendar uma determinada postagem. Tipo enviar por e-Mail como aquele link que fazemos com "mailto", só que no corpo de e-mail já contendo o título e o link do post?

    ResponderExcluir
  9. O blogger aumento o limite de paginas antes era 10 agora é 20.

    ResponderExcluir
  10. ei como que eu fasso com ese link aki nao e do youtube o video me aju tai meu email romali_rml@hotmail.com
    eu kero deixar dese jeito ese mesmo video no meu blog
    http://rocksnrulestv.blogspot.com/2011/01/nightwish-enmore-theatre-sydney-1st.html

    ResponderExcluir
  11. o video está hospedado em outro site http://www.moshcam.com/

    por isso é diferente do youtube

    ResponderExcluir
  12. teria como postar uma janela de video com 2 videos para tocar seguidos como ex colocar todas as partes de um filme em uma unica janela

    ResponderExcluir
  13. HITSUGAYA TOUSHIROU
    não tem como fazer tocar seguidos...

    esse código pode fazer outro video aparece no mesmo lugar, mas precisa clicar no link

    ResponderExcluir
  14. obrigado fabiano
    eu estou criando as paginas do blog para depois
    adicionar templates configuraçoes mas o video nao está aparecendo como ai em cima olhe o link


    http://animesmix1.blogspot.com/b/post-preview?token=TJU_UjMBAAA.njHUkvcoEgc6RINZk7lf7g.qNYmI_qwfXffJv_bn5QMGQ&postId=4342490050084767904&type=POST


    o codigo depois de postar modificol o fim vou deixalo no fim da pagina

    o que eu fiz de errado?
    obrigado por tudo ass:pedro

    ResponderExcluir
  15. HITSUGAYA TOUSHIROU
    não posso ver o link que enviou... ele é um preview (só é visivel durante a edição)

    mas para colocar videos copie os codigos prontos do youtube

    ResponderExcluir
  16. novamente agradeço a atençao seu blog é muito bom

    eu adicionei um marcador e agora deve dar para ver


    http://animesmix1.blogspot.com/2011/10/yu-yu-hakusho-episodio-4-dublado.html


    obrigado novamente

    ResponderExcluir
  17. IRMÃO ,
    NEM CONSEGUI , TO NA LUTA AKI A UM BOM TEMPO !
    SOU INICIANTE , DEPS ME ADC NO MSN PRA ME ESCLARECER UMAS DUVIDAS ! DIEGO_5RIOSRJ@HOTMAIL.COM , SE NUM PUDER AGRADEÇO TAMBEM !

    ResponderExcluir
  18. Diego Morais
    não usamo MSN para assuntos de blogs... seria impossível atender a todos...

    mas se tentar fazer algo e não der certo deixe um comentário na postagem e vamos responder

    ResponderExcluir
  19. Fabiano como salvar a 1ª página do blog em foto?

    ResponderExcluir
  20. @Fã Clube Rebelde Maniacos para salvar a imagem que aparece na sua tela é só clicar no botão print screen no seu teclado e depois colar num programa de edição de imagens

    ResponderExcluir
  21. Fabiano, no editor de postagens do blogger dá p/ adicionar vídeos rapidamente, porém ,sempre q adiciono odisplay do vídeo aparece pequeno, bem menor que a coluna de postagem (fica até ruim de ver)... como faço para colocar o display do vídeo na mesma largura da coluna?

    ResponderExcluir
  22. @Fran no hora de pegar o codigo do video no youtube tem varias opções de tamanho é só escolher uma que se ajuste melhor ao seu blog

    ResponderExcluir
  23. Muito boa as dicas, valeu!!! Vai ajudar muito

    ResponderExcluir
  24. Eu envio videos diretos do computador para o blogger só que a partir de hoje não está mais enviando, por que?

    ResponderExcluir
  25. Anonimo pode ser um erro no carregamento da pagina.

    tente excluir o histórico de internet, mas se não der então tente enviar os videos para o youtube enquanto não acha uma solução melhor

    ResponderExcluir
  26. Eu consegui fazer mais so que eu uso videos do youtube e uol mais,ja sei pegar os links,so que tem um problema nos videos do uol mais ele não fica na opção tela grande quando coloco dentro do script(mais se for postar ele fora ele fica em tela grande)o youtube fica grande,gostaria de saber se tem com fazer com que o video do mais uol fique em tela grande.teria como?

    ResponderExcluir
  27. Anonimo permitir deixar o video grande na tela é uma opção do site que gerou o player e o código.

    se no uol não tiver essas opções acho que não tem o que fazer

    ResponderExcluir
  28. Não ele tem a opção tela grande sim so que quando coloco o url do video no script ele vai normal so que quando clica em tela grande não vai,mais o you tube vai normal fica em tala grande.

    ResponderExcluir
  29. deve ser alguma problema interno do player do video.

    afinal se do youtube funciona normal era para qualquer outro funcionar também.

    ResponderExcluir
  30. aqui exemplo do problema que da,se você puder ver

    http://test454984.blogspot.com.br/2012/08/exemplo-erro-de-video.html

    ta num blog test meu então ta meio bagunçado la você entendera o que eu estou dizendo.

    ResponderExcluir
  31. a tenhe mais umas coisas acho que aqui ja tenha mais não achei,como faz para colocar opções de caixa de comentarios como ta aqui e na opção do blog colocar anônimo,e uma caixa de pesquisa personalizada,e opção de 2 ou mais chat , acho que aqui ja tenha mais não achei você pode me dizer se ja tiver os link,ou se saber me passa um script ,e se de alguma maneira da para colocar animação flash no blog eu queria colocar efeitos tipo imagen em carrosel

    ResponderExcluir
  32. kkkkkk to esqueceno to com varias duvidas ne,esqueci uma como faz para colocar uma planilha feita no excel no blog do tamanho normal dela com links ela e meio grande e tipo uma lista de varias coisas que tem no blog são mais de 700 linha então são separadas por letras e queria colocar onde tem uma linha com titulo assim 'g' queria colocar do lado dela topo assim 'g (topo) onde na 1 linha tem todas as letras para descer ate a que deseja ex: 'a b c d...' e nos fundos das linhas tem uma cor ex 1 linha verde 2 branca 3 verde 4 branca ... para ajudar a se localizar na linha (horizontal) reta entende?

    ResponderExcluir
  33. outra duvida,bom gostaria de saber como faz para usar o jwplayer e video.js player html5 no blog gostaria de saber como coloca 1 so video,e fazer um playlist igual aqueles sites de tv que faz com jwplayer um canal de tv com episodios que se repete automaticamente e qunado entra ta numa parte se você pausar e voltar ela da em outra você perdeu 20 segundos seria mesmo tipo um canal,e outra faz tempo que to tentando colocar o jquery powerslide no meu blog mais não vai ele aparace todo atrapalhado aparece os numeros dos slides la embaixo o conteudo em cima fica uma bangunça por que isso acontece o blogger não aceita se tiver como colocar me fala to precisando dessa respostas para terminar meu blog,se tem um lugar para enviar duvida fala o link porque to lembrando agora as duvidas e sou novo aqui e esse blog ja me ajudou bastante porque as ultimos comentarios anonimos aqui nesta pagina fui eu acho que foram 4 ou 5 alguma coisa assim

    ResponderExcluir
  34. a nãos so o jquery powerslide não consegui colocar mais tambem o JQuery XPOSE Gallery

    ResponderExcluir
  35. Anônimo não tente fazer tantas coisas ao mesmo tempo no seu blog, se ficar testando tudo isso você corre o risco de gerar um erro no seu template e não saberá em qual parte do código foi. E para conseguir descobrir terá que retirar todos os códigos enfim perderá muito tempo e trabalho.

    sobre os videos na pagina de teste que enviou o primeiro deles funcionou normal consegui ver em tela cheia.

    sobre colocar comentários igual usamos aqui, veja neste link: Como Usar Comentários do Facebook e do Blogger ao Mesmo Tempo

    ResponderExcluir
  36. sim o primeiro funciona porque não ta no script o 2 que tava no script,e era o mesmo video,eu faço sempre uma copia do meu template e salvo no meu computador,e tambem eu faço 1 no blog de test que foi aquele que você viu antes de colocar cada coisa no meu original.

    ResponderExcluir
  37. então por favor so ve como colocar o video do uol em tela grande dentro do script e a duvida da planilha eles são muito necessarios para mim

    ResponderExcluir
  38. não sei fazer essa mudança no código

    ResponderExcluir
  39. aquele primeiro código é assim:

    <object width="480" height="360" id="player_13187190"><param value="true" name="allowfullscreen"/><param value="http://player.mais.uol.com.br/embed_v2.swf?tv=2&mediaId=13187190" name="movie"/><param value="always" name="allowscriptaccess"/><param value="window" name="wmode"/><embed id="player_13187190" width="480" height="360" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" src="http://player.mais.uol.com.br/embed_v2.swf?tv=2&mediaId=13187190" wmode="window" /></embed><noscript><a href="http://mais.uol.com.br/view/13187190">Naruto Shippuuden - Episódio 273</a></noscript></object>


    tente pegar o endereço do video do uol e colocar aqui

    ResponderExcluir
  40. não entendi:

    "tente pegar o endereço do video do uol e colocar aqui"

    sim o 1 codigo e esse

    o link do video test e esse:

    http://mais.uol.com.br/view/9cujipklnx4k/naruto-shippuuden--episodio-273-04020C9C316EE0893326?types=A&

    e coloco esse code dentro do script

    http://player.mais.uol.com.br/embed_v2.swf?tv=2&mediaId=13187190

    mais esse não fica em tela grande

    mais não fica em tela grande.

    ResponderExcluir
  41. procurei em varios sites que tem uma coisa igual a que to querendo,e ate que achei um,foi bem dificil procurei por sites que tenha algo relacionado a video e achei esse nas ultimas tentativas,veja um exemplo dos post deles link abaixo:

    http://portal.animazone.com.br/2012/08/fairy-tail-episodio-144.html

    pode se ver que mesmo o video do uol dentro do script fica em tela grande la tem a opção uol e youtube e o que eu quero so não sei se o script e o mesmo ou outro,talvez você vendo isso sabe.

    ResponderExcluir
  42. acho que é melhor procurar os videos no youtube.

    se está conseguindo alterar alguns codigos e outros não é porque os videos não aceitam essa função.

    ResponderExcluir
  43. Como fazer para colocar um atalho em post,quando o post e grande como faz para colocar (volte ao topo)
    mais diferente tipo por categoria
    esporte
    entretenimento
    etc...
    e vai para o certo lugar do post que ta a categoria.

    ResponderExcluir
  44. eu fiz tudo certo e coloquei o código na postagem do meu blog fiz tudo direitinho alterei a configuração para "interpretar HTML digitado" mas quando fui publicar não pegou apareceu um aviso assim "sem HTML não pode ser aceito:a tag não está fechada:FONT" o que eu faço para resolver o problema?

    ResponderExcluir
  45. veja se não faltou algum sinal de aspas < : > / ou ' no código

    veja que " é diferente de ' então use todos iguais

    ResponderExcluir
  46. Gostaria de saber como faço para colocar áudios, vídeos aulas e Apostilas, em meu blog, sendo que cada um tem sua página específica?
    Exemplo: Página de vídeo: colocar vídeo só na página de vídeo.
    Página de áudio: colocar áudio só na página de áudio.
    Página de Apostilas: colocar apostilas só na página de Apostilas.
    desde já agradeço pelas informações,amigo!!
    parabéns pelo seu excelente blog, nos ajuda muito!!

    Sigam meu blog: http://vidadeconcurseirosonline.blogspot.com.br/ e deem suas opiniões, desde já agradeço!!

    ResponderExcluir
  47. Sebastiao Freitas você pode usar os marcadores do blog para classificar e separar suas postagens por categorias, assim teria uma pagina com as postagens de videos outra com posts de audio.... e assim por diante.

    da mesma forma que nosso menu lateral: Acessórios, Colocar Menu, Comentários, Configurações Avançadas ......

    ResponderExcluir
  48. Como fazer para não aparecer os links somente o player com os videos autostart em sequencia? Obrigado

    ResponderExcluir
    Respostas
    1. os vídeos do youtube tem as opções na pagina quando você pega o código para incorporar, acho que não pode alterar esses códigos.

      além disso o vídeo que inicia automaticamente vai deixar seu blog bem mais lento

      Excluir
  49. Infelizmente não funciona em páginas com SSL ATIVADO.

    ResponderExcluir