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?

Nenhum comentário:

Postar um comentário

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