25jan2012
Repositório, para deixar arquivado aqui.
Veja que ao clicar em cada botão, o tamanho do vídeo se altera.
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { height: 100%; }
</style>
<script type="text/javascript">
function sizeIframe( w, h )
{
document.getElementById('yt').width = w;
document.getElementById('yt').height = h;
}
window.onload = function(){
sizeIframe( document.body.offsetWidth, document.body.offsetHeight-30 );
}
</script>
</head>
<body>
<iframe width="420" height="315" src="http://www.youtube.com/embed/tvaPMNq4Ey0" frameborder="0" allowfullscreen id="yt"></iframe>
<input type="button" name="mudar" value="600x480" onclick="sizeIframe( 600, 480 )" />
<input type="button" name="mudar" value="600x480" onclick="sizeIframe( 420, 315 )" />
<input type="button" name="mudar" value="300x240" onclick="sizeIframe( 300, 240 )" />
</body>
</html>
É isso. Me diga se vc usar.
Link deste post
Tags: embed
14jun2011
Não raramente fazemos sistemas em que precisamos embedar vídeos do youtube no site de nossos clientes.
Até para deixar registrado aqui, nesse meu repositório, esta foi a ER que utilizei recentemente:
<?php
preg_match( '/(v=)([^&]+)/', 'http://www.youtube.com/watch?v=K0e1DbvE0bg&feature=topvideos_music', $matches );
var_dump( $matches[2] );
return $matches;
é isso, post rápido.
Link deste post
18mai2011
Se estivermos trabalhando nossos sites com DTD xHTML, não podemos usar a tag <iframe>, então a saída, é embedar com a tag <object>, que funciona muito bem, e valida no w3c.
Apesar do Youtube hoje em dia, só fornecer o embed com iframe, antigamente o código que ele disponibilizava, era baseado nas tags <object>, e <embed>. Acredito que por questões de compatibilidade, ainda hoje conseguimos servir videos do Youtube nos nossos sites, usando a tag object apenas.
<object height="196" width="305" data="http://www.youtube.com/v/HiaOFOMPOBc" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="quality" value="hight" />
<param name="src" value="http://www.youtube.com/v/HiaOFOMPOBc" />
</object>
No embed do YT, convém notar o formato com que o atributo data, e o value do param src, devem ser passados.
O link no youtube para o vídeo é do tipo: http://www.youtube.com/watch?v=HiaOFOMPOBc
Sendo o valor que destaque ali em negrito o ID dele.
Para fazer o embed corretamente, vc deve extrair esse ID, e jogar no novo formato da URL: http://www.youtube.com/v/ID_DO_VIDEO_AQUI
Já para o vimeo, o buraco é um pouco mais embaixo
<object height="196" width="305" type="application/x-shockwave-flash" class="" data="http://a.vimeocdn.com/p/flash/moogaloop/5.1.14/moogaloop.swf?v=1.0.0" style="visibility: visible;">
<param name="allowscriptaccess" value="always">
<param name="allowfullscreen" value="true">
<param name="scalemode" value="noscale">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="bgcolor" value="#000000">
<param name="flashvars" value="server=vimeo.com&player_server=player.vimeo.com&cdn_server=a.vimeocdn.com&embed_location=&force_embed=0&force_info=1&moogaloop_type=moogaloop_local&js_api=1&js_getConfig=player23465729_920282954.getConfig&js_setConfig=player23465729_920282954.setConfig&clip_id=23465729&fullscreen=1&js_onLoad=player23465729_920282954.player.moogaloopLoaded&js_onThumbLoaded=player23465729_920282954.player.moogaloopThumbLoaded">
</object>
ali nos flasvars, dê uma atenção especial ao parâmetro: clip_id=17100311, alterando esse ID, vc consegue alterar o vídeo que será exibido no teu embed.
É isso =)
Link deste post
