Como posicionar um iframe pelo css ?
Bom dia, Gostaria de inserir um video direto do youtube em meu site mas preciso posicioná-lo em um local bem específico dentro da pagina( até da certo apenas alterar o position para right,left mas ele nao fica no local certo) Então pensei em criar uma div, e inserir o iframe dentro e alterar o lugar da div pelo css, mas depois que eu inseri o iframe na div, além de o video ter parado de rodar,ele nao reconhce as alteraçoes realizadas através do css.. Códigos:
*HTML:
<div id="filmey">
<video id="filme" controls="controls">
<iframe width="560" height="315" src="//www.youtube.com/embed/4EvNxWhskf8?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
*CSS:
div#filmey {
display: block;
position: center;
left: 90px;
top: 500px;
width: 440px;
}
Acho que acabei fazendo uma meleca,então se alguém souber uma forma mais prática de fazer isso, eu agradeceria, abç kk
*HTML:
<div id="filmey">
<video id="filme" controls="controls">
<iframe width="560" height="315" src="//www.youtube.com/embed/4EvNxWhskf8?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
*CSS:
div#filmey {
display: block;
position: center;
left: 90px;
top: 500px;
width: 440px;
}
Acho que acabei fazendo uma meleca,então se alguém souber uma forma mais prática de fazer isso, eu agradeceria, abç kk
Bianca Assone
Curtidas 0
Respostas
Marisiana Battistella
23/03/2015
Olá Bia!
A tag video não precisa ser fechada?
A tag video não precisa ser fechada?
<video id="filme" controls="controls">
GOSTEI 0
Marisiana Battistella
23/03/2015
Veja este exemplo:
fonte: [url]http://www.w3schools.com/html/html5_video.asp[/url]
<video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
fonte: [url]http://www.w3schools.com/html/html5_video.asp[/url]
GOSTEI 0
Jothaz
23/03/2015
Só um adica quando for postar exemplos de código use o ícone </> da barra, pois assim fica formatado e facilita a leitura e a ajuda.
Marisiana tem razão a tag <video> não esta fechada o que pode esta ocasionando algum erro, mas acho que a tag video só deve ser usada se você for usar o palyer da HTML assim:
No caso do youtube você pode usar somente o Iframe, a ideia geral é esta mesmo coloque uma div e o iframe dentro dela, fiz um exemplo básico que funcionou, teste e reporte qualquer problema:
É só um exemplo e claro que o .css deveria ficar em um arquivo externo como manda as boas práticas.
Marisiana tem razão a tag <video> não esta fechada o que pode esta ocasionando algum erro, mas acho que a tag video só deve ser usada se você for usar o palyer da HTML assim:
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
No caso do youtube você pode usar somente o Iframe, a ideia geral é esta mesmo coloque uma div e o iframe dentro dela, fiz um exemplo básico que funcionou, teste e reporte qualquer problema:
<html>
<head>
<style>
div#IframePos {
position: absolute;
overflow:auto;
width: 640px;
height: 385px;
top: 40%;
left: 20%;
margin-top: -150px;
margin-left: -200px;
}
</style>
</head>
<div id="IframePos">
<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/v=NLRbtQaVS7M" frameborder="0" allowfullscreen></iframe>
</div>
</html>
É só um exemplo e claro que o .css deveria ficar em um arquivo externo como manda as boas práticas.
GOSTEI 0
Bianca Assone
23/03/2015
Olá Bia!
A tag video não precisa ser fechada?
A tag video não precisa ser fechada?
<video id="filme" controls="controls">
nossa, na verdade ,eu esqueci de apagar esse controls, quando é um iframe do youtube nao tem necessidade de inserir o controls pq o iframe ja vem com este "menu", e enquato ao source, ele só funciona quando ja foi realizado o download do video, oque eu gostaria de fazer era inserir um video direto do youtube, mas de qualquer forma, obrigada pela atenção!
GOSTEI 0
Bianca Assone
23/03/2015
Só um adica quando for postar exemplos de código use o ícone </> da barra, pois assim fica formatado e facilita a leitura e a ajuda.
Marisiana tem razão a tag <video> não esta fechada o que pode esta ocasionando algum erro, mas acho que a tag video só deve ser usada se você for usar o palyer da HTML assim:
No caso do youtube você pode usar somente o Iframe, a ideia geral é esta mesmo coloque uma div e o iframe dentro dela, fiz um exemplo básico que funcionou, teste e reporte qualquer problema:
É só um exemplo e claro que o .css deveria ficar em um arquivo externo como manda as boas práticas.
Marisiana tem razão a tag <video> não esta fechada o que pode esta ocasionando algum erro, mas acho que a tag video só deve ser usada se você for usar o palyer da HTML assim:
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
No caso do youtube você pode usar somente o Iframe, a ideia geral é esta mesmo coloque uma div e o iframe dentro dela, fiz um exemplo básico que funcionou, teste e reporte qualquer problema:
<html>
<head>
<style>
div#IframePos {
position: absolute;
overflow:auto;
width: 640px;
height: 385px;
top: 40%;
left: 20%;
margin-top: -150px;
margin-left: -200px;
}
</style>
</head>
<div id="IframePos">
<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/v=NLRbtQaVS7M" frameborder="0" allowfullscreen></iframe>
</div>
</html>
É só um exemplo e claro que o .css deveria ficar em um arquivo externo como manda as boas práticas.
Jothaz, deu certo! a unica coisa que eu tive que alterar foi o src,nao sei porquê, mas o video nao estava sendo encontrado, então alterei para este
src="//www.youtube.com/embed/4EvNxWhskf8?rel=0"
GOSTEI 0
Marisiana Battistella
23/03/2015
Olá Bia!
A tag video não precisa ser fechada?
A tag video não precisa ser fechada?
<video id="filme" controls="controls">
nossa, na verdade ,eu esqueci de apagar esse controls, quando é um iframe do youtube nao tem necessidade de inserir o controls pq o iframe ja vem com este "menu", e enquato ao source, ele só funciona quando ja foi realizado o download do video, oque eu gostaria de fazer era inserir um video direto do youtube, mas de qualquer forma, obrigada pela atenção!
Por nada!!
GOSTEI 0