Ver Mensaje Individual
  #4 (permalink)  
Antiguo 29/05/2012, 15:49
Avatar de emprear
emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Insertar youTube en html con opciones

poniendo esa url se genera esto
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.   <html lang="es" dir="ltr" >
  3.  
  4.     <title>Geoff Stearns and the YouTube Player APIs - YouTube</title>
  5.  
  6.     <link  rel="stylesheet" href="http://s.ytimg.com/yt/cssbin/www-embed-vflNIFpmG.css">
  7.  
  8.  
  9.     <link rel="canonical" href="/watch?v=Zhawgd0REhA">
  10.  
  11.   <style>
  12.     @-o-viewport { width: device-width; }
  13.     @-moz-viewport { width: device-width; }
  14.     @-ms-viewport { width: device-width; }
  15.     @-webkit-viewport { width: device-width; }
  16.     @viewport { width: device-width; }
  17.   </style>
  18.  
  19.  
  20. </head>
  21.   <body id="" class="date-20120529 es_ES ltr   ytg-old-clearfix gecko gecko-12" dir="ltr">
  22.  
  23.  
  24. <div id="watch-longform-ad" class="hid">
  25.   <div id="watch-longform-text">
  26. Anuncio
  27.   </div>
  28.   <div id="watch-longform-ad-placeholder"><img src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" height="60" width="300"></div>
  29. </div>
  30.  
  31.  
  32.  
  33.   <div id="player" class="full-frame"></div>
  34.  
  35.        
  36.     <script  src="//s.ytimg.com/yt/jsbin/www-embed_core_module-vfl5WZ9N-.js"></script>
  37.  
  38.  
  39.   <script>
  40.     yt.setConfig({
  41.       'EMBED_BINARY_URL': '//s.ytimg.com/yt/jsbin/www-embed_core_module-vfl5WZ9N-.js',
  42.       'ORIGIN': "*",
  43.       'IS_OPERA_MINI': false
  44.     });
  45.     yt.setMsg({
  46.       'FLASH_UPGRADE': '<div class=\"yt-alert yt-alert-default yt-alert-error  yt-alert-player\"><div class=\"yt-alert-icon\"><img src=\"\/\/s.ytimg.com\/yt\/img\/pixel-vfl3z5WfW.gif\" class=\"icon master-sprite\" alt=\"Icono de alerta\"><\/div><div class=\"yt-alert-buttons\"><\/div><div class=\"yt-alert-content\">    <span class=\"yt-alert-vertical-trick\"><\/span>\n    <div class=\"yt-alert-message\">\n            Es necesario actualizar Adobe Flash Player para ver este vídeo. <br> <a href=\"http:\/\/get.adobe.com\/flashplayer\/\">Descárgalo en la página de Adobe<\/a>.\n    <\/div>\n<\/div><\/div>'
  47.     });
  48.       yt.setConfig({
  49.       'PLAYER_CONFIG': {"assets": {"html": "\/html5_player_template", "css": "http:\/\/s.ytimg.com\/yt\/cssbin\/www-player-vflAJ9MUS.css", "js": "http:\/\/s.ytimg.com\/yt\/jsbin\/html5player-vfl3Lyjm7.js"}, "url": "http:\/\/s.ytimg.com\/yt\/swfbin\/watch_as3-vflUMVRQ9.swf", "min_version": "8.0.0", "args": {"el": "embedded", "fexp": "907217,907335,921602,919306,919316,904455,912804,919324,912706,904452", "is_html5_mobile_device": false, "allow_embed": 1, "tabsb": "1", "allow_ratings": 1, "hl": "es_ES", "eurl": "", "iurl": "http:\/\/i3.ytimg.com\/vi\/Zhawgd0REhA\/hqdefault.jpg", "view_count": 48596, "title": "Geoff Stearns and the YouTube Player APIs", "avg_rating": 4.26315789474, "video_id": "Zhawgd0REhA", "length_seconds": 2395, "sendtmp": "1", "enablejsapi": "0", "sk": "pSx-hEp1IQzlaUJCe0Hy9Ep73LqwI1XMC", "rel": "1", "playlist_module": "http:\/\/s.ytimg.com\/yt\/swfbin\/playlist_module-vflUf9Mr9.swf", "watch_xlb": "http:\/\/s.ytimg.com\/yt\/xlb\/watch\/strings-es_ES-vflqhPIH7.xlb"}, "url_v9as2": "http:\/\/s.ytimg.com\/yt\/swfbin\/cps-vflwbPB-W.swf", "params": {"allowscriptaccess": "always", "allowfullscreen": "true", "bgcolor": "#000000"}, "attrs": {"width": "100%", "id": "video-player", "height": "100%"}, "url_v8": "http:\/\/s.ytimg.com\/yt\/swfbin\/cps-vflwbPB-W.swf", "html5": false},
  50.     'EMBED_HTML_TEMPLATE': "\u003ciframe width=\"__width__\" height=\"__height__\" src=\"__url__\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e",
  51.     'EMBED_HTML_URL': "http:\/\/www.youtube.com\/embed\/__videoid__"
  52.   });
  53.     yt.setMsg('HTML5_DEFAULT_FALLBACK', "Este v\u00eddeo no est\u00e1 disponible actualmente.");
  54.   yt.setMsg('FLASH_UPGRADE', "\u003cdiv class=\"yt-alert yt-alert-default yt-alert-error  yt-alert-player\"\u003e\u003cdiv class=\"yt-alert-icon\"\u003e\u003cimg s\u0072c=\"\/\/s.ytimg.com\/yt\/img\/pixel-vfl3z5WfW.gif\" class=\"icon master-sprite\" alt=\"Icono de alerta\"\u003e\u003c\/div\u003e\u003cdiv class=\"yt-alert-buttons\"\u003e\u003c\/div\u003e\u003cdiv class=\"yt-alert-content\"\u003e    \u003cspan class=\"yt-alert-vertical-trick\"\u003e\u003c\/span\u003e\n    \u003cdiv class=\"yt-alert-message\"\u003e\n            Es necesario actualizar Adobe Flash Player para ver este v\u00eddeo. \u003cbr\u003e \u003ca href=\"http:\/\/get.adobe.com\/flashplayer\/\"\u003eDesc\u00e1rgalo en la p\u00e1gina de Adobe\u003c\/a\u003e.\n    \u003c\/div\u003e\n\u003c\/div\u003e\u003c\/div\u003e");
  55.   yt.setMsg('HTML5_NO_AVAILABLE_FORMATS_FALLBACK', "Actualmente el navegador no reconoce ninguno de los formatos de v\u00eddeo disponibles.\u003cbr\u003e\u003ca href=\"\/html5\"\u003eHaz clic aqu\u00ed para acceder a las preguntas frecuentes sobre v\u00eddeos en HTML5.\u003c\/a\u003e");
  56.   yt.setMsg('PLAYER_FALLBACK', "\u003cdiv class=\"yt-alert yt-alert-default yt-alert-error  yt-alert-player\"\u003e\u003cdiv class=\"yt-alert-icon\"\u003e\u003cimg s\u0072c=\"\/\/s.ytimg.com\/yt\/img\/pixel-vfl3z5WfW.gif\" class=\"icon master-sprite\" alt=\"Icono de alerta\"\u003e\u003c\/div\u003e\u003cdiv class=\"yt-alert-buttons\"\u003e\u003c\/div\u003e\u003cdiv class=\"yt-alert-content\"\u003e    \u003cspan class=\"yt-alert-vertical-trick\"\u003e\u003c\/span\u003e\n    \u003cdiv class=\"yt-alert-message\"\u003e\n            Para reproducir v\u00eddeos, debes tener instalado Adobe Flash Player o un navegador compatible con HTML5. \u003cbr\u003e \u003ca href=\"http:\/\/get.adobe.com\/flashplayer\/\"\u003eDescargar la versi\u00f3n m\u00e1s reciente de Adobe Flash Player\u003c\/a\u003e \u003cbr\u003e \u003ca href=\"\/html5\"\u003eM\u00e1s informaci\u00f3n sobre c\u00f3mo actualizar a un navegador compatible con HTML5\u003c\/a\u003e\n    \u003c\/div\u003e\n\u003c\/div\u003e\u003c\/div\u003e");
  57.   yt.setMsg('QUICKTIME_FALLBACK', "\u003cdiv class=\"yt-alert yt-alert-default yt-alert-error  yt-alert-player\"\u003e\u003cdiv class=\"yt-alert-icon\"\u003e\u003cimg s\u0072c=\"\/\/s.ytimg.com\/yt\/img\/pixel-vfl3z5WfW.gif\" class=\"icon master-sprite\" alt=\"Icono de alerta\"\u003e\u003c\/div\u003e\u003cdiv class=\"yt-alert-buttons\"\u003e\u003c\/div\u003e\u003cdiv class=\"yt-alert-content\"\u003e    \u003cspan class=\"yt-alert-vertical-trick\"\u003e\u003c\/span\u003e\n    \u003cdiv class=\"yt-alert-message\"\u003e\n            Es necesario disponer de Adobe Flash Player o de QuickTime para reproducir el v\u00eddeo. \u003cbr\u003e \u003ca href=\"http:\/\/get.adobe.com\/flashplayer\/\"\u003eObtener la \u00faltima versi\u00f3n de Adobe Flash Player\u003c\/a\u003e \u003cbr\u003e \u003ca href=\"http:\/\/www.apple.com\/quicktime\/download\/\"\u003eObtener la \u00faltima versi\u00f3n de QuickTime\u003c\/a\u003e\n    \u003c\/div\u003e\n\u003c\/div\u003e\u003c\/div\u003e");
  58.  
  59.   yt.setMsg('HTML5_SPEED_NORMAL', "Normal");
  60.   yt.setMsg('HTML5_QUALITY_SETTING', "calidad");
  61.   yt.setMsg('HTML5_SPEED_SETTING', "velocidad");
  62.   yt.setMsg('HTML5_VOLUME_SETTING', "volumen");
  63.   yt.setMsg('HTML5_VOLUME_MUTED', "silenciado");
  64.   yt.setMsg('HTML5_VOLUME_MUTE', "silenciar");
  65.   yt.setMsg('HTML5_VOLUME_UNMUTE', "activar el sonido");
  66.   yt.setMsg('HTML5_CONTROL_TOGGLE', "Cambiar");
  67.  
  68.   yt.setMsg('HTML5_SUBS_TRANSCRIBED', "transcrito");
  69.   yt.setMsg('VISIT_ADVERTISERS_SITE', "Visitar el sitio del anunciante");
  70.   yt.setMsg('FRESCA_COMPLETE_MESSAGE', "Gracias por ver este v\u00eddeo.");
  71.   yt.setMsg('FRESCA_STAND_BY_MESSAGE', "Por favor, espera.");
  72.  
  73.  
  74.  
  75.       yt.embed.writeEmbed();
  76.   </script>
  77.  
  78.  
  79.  
  80. </body>
  81. </html>

Por lo que lo adapta al tamaño de la pantalla
Recordá que YouTube no carga el video en sí, sino un reproductor al que se le pasan funciones.

Si querés el reproductor con sus opciones y con una medida específica, usas los asistentes que te indique antes, ejemplo


por ejemplo asi
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3. youtube
  4. </head>
  5. <object type="application/x-shockwave-flash" width="500" height="400" data="http://www.youtube.com/v/Zhawgd0REhA?version=3&amp;autoplay=1&amp;rel=0&amp;showinfo=0&amp;hd=1&amp;autohide=1&amp;color=white">
  6. <param name="movie" value="http://www.youtube.com/v/Zhawgd0REhA?version=3&amp;autoplay=1&amp;rel=0&amp;showinfo=0&amp;hd=1&amp;autohide=1&amp;color=white">
  7. <param name="allowFullScreen" value="true">
  8. <param name="allowscriptaccess" value="always">
  9. </body>
  10. </html>



Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.