Foros del Web » Creando para Internet » HTML »

Insertar youTube en html con opciones

 Estas en el tema de Insertar youTube en html con opciones en el foro de HTML en Foros del Web. Buenas tardes para todos Así se inserta en video de YouTube en html: Cita: <object width="480" height="360"><param name="movie" value="http://www.youtube.com/v/WPbcxK2M3vo?version=3&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/WPbcxK2M3vo?version=3&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" ...
  #1 (permalink)  
Antiguo 29/05/2012, 12:28
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Pregunta Insertar youTube en html con opciones
Buenas tardes para todos

Así se inserta en video de YouTube en html:

Cita:
<object width="480" height="360"><param name="movie" value="http://www.youtube.com/v/WPbcxK2M3vo?version=3&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/WPbcxK2M3vo?version=3&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" width="480" height="360" allowscriptaccess="always" allowfullscreen="true"></embed></object>
Pero yo sólo necesito el:

Cita:
src=http://www.youtube.com/v/WPbcxK2M3vo?version=3&amp;hl=es_ES&amp;rel=0
Pero me queda fullscreen y deseo que no este fullscreen.

Que debo agregarle para que no se cargue fullscreen?

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario
  #2 (permalink)  
Antiguo 29/05/2012, 14:55
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Insertar youTube en html con opciones
Podés personalizar la inserción del video de you tube utilizando el asistente en

https://developers.google.com/youtub...be_player_demo

también tenés esta herramienta
http://www.vtubetools.com/
SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
Última edición por emprear; 29/05/2012 a las 15:08
  #3 (permalink)  
Antiguo 29/05/2012, 15:26
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Respuesta: Insertar youTube en html con opciones
Hola emprear, gracias por tu ayuda
Que buenos aportes, pero mira yo deseo que en la ruta del video quede la opción, si tu copias esta ruta en el navegador el video se carga a pantalla completa.

http://www.youtube.com/embed/Zhawgd0REhA

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #4 (permalink)  
Antiguo 29/05/2012, 15:49
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 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. <head>
  5.     <title>Geoff Stearns and the YouTube Player APIs - YouTube</title>
  6.  
  7.     <link  rel="stylesheet" href="http://s.ytimg.com/yt/cssbin/www-embed-vflNIFpmG.css">
  8.  
  9.  
  10.     <link rel="canonical" href="/watch?v=Zhawgd0REhA">
  11.  
  12.   <style>
  13.     @-o-viewport { width: device-width; }
  14.     @-moz-viewport { width: device-width; }
  15.     @-ms-viewport { width: device-width; }
  16.     @-webkit-viewport { width: device-width; }
  17.     @viewport { width: device-width; }
  18.   </style>
  19.  
  20.   
  21. </head>
  22.   <body id="" class="date-20120529 es_ES ltr   ytg-old-clearfix gecko gecko-12" dir="ltr">
  23.  
  24.  
  25. <div id="watch-longform-ad" class="hid">
  26.   <div id="watch-longform-text">
  27. Anuncio
  28.   </div>
  29.   <div id="watch-longform-ad-placeholder"><img src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" height="60" width="300"></div>
  30. </div>
  31.  
  32.  
  33.  
  34.   <div id="player" class="full-frame"></div>
  35.  
  36.         
  37.     <script  src="//s.ytimg.com/yt/jsbin/www-embed_core_module-vfl5WZ9N-.js"></script>
  38.  
  39.  
  40.   <script>
  41.     yt.setConfig({
  42.       'EMBED_BINARY_URL': '//s.ytimg.com/yt/jsbin/www-embed_core_module-vfl5WZ9N-.js',
  43.       'ORIGIN': "*",
  44.       'IS_OPERA_MINI': false
  45.     });
  46.     yt.setMsg({
  47.       '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>'
  48.     });
  49.       yt.setConfig({
  50.       '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},
  51.     'EMBED_HTML_TEMPLATE': "\u003ciframe width=\"__width__\" height=\"__height__\" src=\"__url__\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e",
  52.     'EMBED_HTML_URL': "http:\/\/www.youtube.com\/embed\/__videoid__"
  53.   });
  54.     yt.setMsg('HTML5_DEFAULT_FALLBACK', "Este v\u00eddeo no est\u00e1 disponible actualmente.");
  55.   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");
  56.   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");
  57.   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");
  58.   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");
  59.  
  60.   yt.setMsg('HTML5_SPEED_NORMAL', "Normal");
  61.   yt.setMsg('HTML5_QUALITY_SETTING', "calidad");
  62.   yt.setMsg('HTML5_SPEED_SETTING', "velocidad");
  63.   yt.setMsg('HTML5_VOLUME_SETTING', "volumen");
  64.   yt.setMsg('HTML5_VOLUME_MUTED', "silenciado");
  65.   yt.setMsg('HTML5_VOLUME_MUTE', "silenciar");
  66.   yt.setMsg('HTML5_VOLUME_UNMUTE', "activar el sonido");
  67.   yt.setMsg('HTML5_CONTROL_TOGGLE', "Cambiar");
  68.  
  69.   yt.setMsg('HTML5_SUBS_TRANSCRIBED', "transcrito");
  70.   yt.setMsg('VISIT_ADVERTISERS_SITE', "Visitar el sitio del anunciante");
  71.   yt.setMsg('FRESCA_COMPLETE_MESSAGE', "Gracias por ver este v\u00eddeo.");
  72.   yt.setMsg('FRESCA_STAND_BY_MESSAGE', "Por favor, espera.");
  73.  
  74.  
  75.  
  76.       yt.embed.writeEmbed();
  77.   </script>
  78.  
  79.  
  80.  
  81. </body>
  82. </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. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>
  6. youtube
  7. </title>
  8. </head>
  9. <body>
  10. <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">
  11. <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">
  12. <param name="allowFullScreen" value="true">
  13. <param name="allowscriptaccess" value="always">
  14. </object>
  15. </body>
  16. </html>



Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 30/05/2012, 12:08
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Respuesta: Insertar youTube en html con opciones
Hola emprear, nuevamente gracias por tu ayuda

Mira te planteo un poco cual es mi problema:

El el index.html tengo unos hipertexto (toolTip) que los abro con esta librería:

jquery-1.7.2.min.js
jquery.cluetip.js
demo.js

Cuando cargo el toolTip (hipertexto) el tiene unos enlaces a unos videos de YouTube que cargo con la librería "shadowbox.js", pero cuando hago clic sobre el link se me abre el video a pantalla completa.

Así esta la carga para los videos en el toolTip:

Cita:
<a href="http://www.youtube.com/embed/RKVJicTW9rc?rel=0&showinfo=0&fs=1" rel="shadowbox[galeria2]; width=480; height=360>
Los toolTip son .html. Si yo ingreso a cada toolTip me funciona bien el shadowbox.js, pero cuando se carga sobre el index.html me hace lo que te digo, se me pone el video a pantalla completa.

No se que conflicto hay entre las librerías, si me puedes decir como hago para que me cargue bien el shadowbox.js.

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario

Etiquetas: flash, opciones, youtube
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 09:26.