GARANTIR DESCONTO

Fórum Como posicionar um iframe pelo css ? #514460

23/03/2015

0

Front-end

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
Bianca Assone

Bianca Assone

Responder

Posts

23/03/2015

Marisiana Battistella

Olá Bia!
A tag video não precisa ser fechada?
<video id="filme" controls="controls">
Responder

Gostei + 0

23/03/2015

Marisiana Battistella

Veja este exemplo:
<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]
Responder

Gostei + 0

23/03/2015

Jothaz

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:

<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.
Responder

Gostei + 0

23/03/2015

Bianca Assone

Olá Bia!
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!
Responder

Gostei + 0

24/03/2015

Bianca Assone

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:

<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"
, mas ja alterei e agora esta tudo certinho..que bom ter você por perto pq já é a segunda vez que me salva kk valeu pelas dicas :)
Responder

Gostei + 0

25/03/2015

Marisiana Battistella

Olá Bia!
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!!
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar