Gesior AAC Como adicionar iframe Youtube no Site.

[Totten 5]

Fala galera do TK, aqui vai um tutorial de como adicionar iframe do Youtube em seu site, pra ficar aquela miniatura de um video. No final do tutorial eu mostro o resultado de como fica. Vamos lá!

 

Adquirindo o link do iframe:

 

  Mostrar conteúdo oculto

1° Passo:

Para podermos trabalhar com o iframe do youtube, é necessário pegarmos o código da api no site do mesmo. Acesse o link do seu vídeo que deseja utilizar como iframe, no meu caso eu vou utilizar o link do trailer do meu servidor.

Ao acessar o seu vídeo, clique em compartilhar:

 

2° Passo: 

 

Clique em incorporar, dessa forma você irá obter o código da API do youtube, o qual libera o IFRAME de seu vídeo.

3° Passo:

Copie o código disponibilizado pela API do youtube. O código está destacado em vermelho na imagem.

 

Implementando o código da API em nosso site:

 

  Mostrar conteúdo oculto

1° Passo:

Agora que temos nosso código da API em mãos, podemos anexar o mesmo em nosso site. Basta acessar a página de conteúdo na qual você deseja inserir ele. No meu caso, vou inserir no template do meu site, assim independente de qual página o usuário acessar no site, sempre estará sendo exibido a miniatura do trailer do meu servidor. Vamos lá:

Como em meu caso vou utilizar meu template como base, vou acessar template.php, em seu caso pode ser outro arquivo, vai depender de onde você quiser adicionar. Abre o arquivo e insira o código, ele vai ficar +/- assim:

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

2° Passo:

Pronto, o código já está inserido, porém se adicionarmos simplesmente assim, ele pode ficar muito grande dependendo do lugar onde desejo que ele seja exibido. Sendo assim, vamos modificar suas dimensões.

Para mudar a largura do iframe(video) você deve alterar o width dele, por padrão a API do Youtube disponibiliza com 560 de largura o vídeo. No meu caso, eu quero que ele tenha 200 pixel de largura, sendo assim, basta modificar o width para 200. Ficando da seguinte forma:

<iframe width="200" height="315" src="https://www.youtube.com/embed/u5pjPFdG_3Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Beleza, já temos redimensionado nosso vídeo em questão da largura, mas e a altura? É muito simples, basta modificar agora o height do iframe(video), por padrão a API do Youtube disponibiliza com 315 pixel de altura.

No meu caso, eu quero que ele tenha 150 pixel de altura, sendo assim, basta modificar o height para 150. Ficando da seguinte forma:

<iframe width="200" height="150" src="https://www.youtube.com/embed/u5pjPFdG_3Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Pronto nosso vídeo está redimensionado e pronto para ser exibido!!

 

Resultado Final:

 

  Mostrar conteúdo oculto

Se você seguiu passo a passo do tutorial, você ter algo parecido com isso como resultado:

 

Lembrando que no meu caso, eu configurei ele para ser exibido em miniatura no meu site, você pode deixar do tamanho que desejar.

Quando clicar no play, o vídeo será executado em miniatura mesmo, e caso o usuário queira, ele pode por em tela cheia, ou até mesmo ir direto para seu canal no youtube.

 

[LeoTK 796]

Parabéns, seu tópico de conteúdo foi aprovado!
Muito obrigado pela sua contribuição, nós do Tibia King agradecemos.
Seu conteúdo com certeza ajudará à muitos outros, você recebeu +1 REP.

  Mostrar conteúdo oculto

Congratulations, your content has been approved!
Thank you for your contribution, we of Tibia King we are grateful.
Your content will help many other users, you received +1 REP.