23/07/2018

Como deixar todos os videos do blog do mesmo tamanho [001]


Yo! Yo! Yo amigos! Como vão todos? Espero que bem! Hoje venho trazer mais uma solução do que tutorial, ou um combo dos dois juntos. Quem nunca pode mudar muito o estilo de suas postagens por usar videos do YouTube? Ou não usa videos do YouTube porque gosta de mudar a largura do seu blog? Sendo assim vou mostrar como deixar todos os videos do blog do mesmo tamanho, independente da configuração do tamanho dele. O método é muito, mais muitos simples. 


Mas devo deixar claro que ao utilizar esse tutorial, todos os videos que possuir em seu blog ficaram do mesmo tamanho, seja da postagem, da sidebar, rodapé a onde tiver vídeo vai ficar do mesmo tamanho. Então se gosta de adicionar vídeo na sidebar, aconselho não usar esse tutorial. O tutorial é bem curto, mas para aqueles que querem aprender irei explicar um pouco sobre, se não tiver paciência pule somente para o tutorial. =(

Esse é código incorporado oferecido pelo YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/_kIrRooQwuk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Azul: Tag [Em uma forma simples de dizer Tag são palavras que interligam o CSS ao Script. CSS é o código quer personaliza, enquanto o Script é o corpo que será personalizado. Basicamente é isso.]
Vermelho: Largura do video. 
Laranja: Altura do video. 
Rosa: Endereço do Video

As de mais partes são configurações que escolhemos na própria pagina que copiamos o código do YouTube. Como autoplay e controles de vídeo. 

Quando pegamos o código no YouTube temos que escolher uma proporção de tamanho ou deixar o sugerido, mas isso não implicará o tutorial que vamos seguir, e usaremos somente a Tag do código o iframe. Lembra que explicando sobre o código disse que essa Tag interliga o CSS ao Script? Então todo esse código do YouTube é um Script, então agora vamos criar um CSS para personalizar ele, no caso o tamanho dele

1. Para isso vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, agora pesquise por  ]]></b:skin>, assim que achar acima dele cole esse código:

Códigos
iframe {
width: 480px;
heigh: 315px;
}

Salve e veja se os parâmetros se encaixam ao seu gosto. Vá diminuindo ou aumentando da largura e altura até estar ao seu agrado. Devo avisar que os vídeos do blog tem um padrão de tamanho, para não comer as imagens do vídeo, então vá medindo até ficar certinho.  =) Viu como é simples arrumar o tamanho deles?

13 comentários:

  1. E que bela solução! Sempre tive problemas com o tamanho do vídeo em alguns templates que usava, agora estou com um que já tem o tamanho grande mas é bom saber porque se eu trocar e precisar de hepl já sei a quem recorrer :D

    Apenas eu, Day

    ResponderExcluir
  2. Oi, eu já acompanho o seu blog faz um tempo, e vejo que você desenvolve muito layout lindos.
    Você desenvolve também para loja e-commerce?
    Se sim, como posso entrar em contato com você?

    ResponderExcluir
  3. Sou a moça que mandou o comentario anterior sobre layout de loja de e-commerce. Se a resposta for sim, me manda um e-mail para a gente conversar sobre, e orçamento e tal

    e-mail: girlenne04@gmail.com

    (p.s não acerte esse comentário na moderação de comentario pfv hahhaah)

    ResponderExcluir
  4. oiiii, tudo bom com vc
    poderia fazer um favor pra mim, colocar no meu template Comentarios, Autor e marcadores abaixo do título do post
    Por favor, assim como esse tutorial, é muito dificil, não consigo,

    Fale cmg por lá esterleme2211@gmail.com

    Quanto ao post, gostei, talvez eu use algum dia, beijos.

    ResponderExcluir
  5. peguei um layout seu! obrigada, ele é muito bonito!!!!

    ResponderExcluir
  6. Oii, tudo bem? Que legal isso, talvez eu utilize. Mas sabe o que eu queria mesmo? É colocar Google ads, propagandas, só que somente nas postagens. Eu procurei como faz isso e achei um vídeo explicando, mas ainda não consigo fazer. Quanto você cobra pra fazer isso pra mim? Zoas. Kkk tenho dinheiro não .
    Mas se você conseguir, não poderia fazer isso pra mim? Por favorzinho.
    Obrigada. Beijinhos

    esterleme2211@gmail.com

    ResponderExcluir
  7. Oi, tudo bem?
    Quanto vc cobra pra fazer um template só pra mim?

    esterleme2211@gmail.com

    ResponderExcluir
  8. Quero um template exclusivo sem disponibilização pra outras pessoas ......

    ResponderExcluir
  9. Oi Wendy, queria saber se você ainda faz layout por encomenda ou não.

    ResponderExcluir
  10. Poxa... queria ter conhecido o blog antes :(

    ResponderExcluir
  11. oie, sabe como deixar a postagem em forma de folha de caderno?

    ResponderExcluir
  12. Meu Deus eu nem sabia que você tinha voltado... Quanto tempo... Mas já faz 4 anos...

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345