Cómo hacer una pantalla Multi Video de YouTube
Mientras que otros propietarios de sitios web están viendo solo videos de YouTube en sus páginas Web, rodean a los visitantes del sitio con una pantalla llena de reproductores de vídeo. Iframes--pequeños bloques de código HTML - permiten mostrar una pantalla completa de videos de YouTube en cualquier sitio Web. Los visitantes pueden hacer clic en un video para ver o sentarse y ver como todos los videos en su página Web jugar automáticamente cuando visitan su sitio. Los videos de YouTube son gratis y sólo toma unos minutos para crear tu propia pantalla Multi Video YouTube personal.
Instrucciones
1 Inicie un editor de texto o el editor de HTML. Abrir cualquier documento HTML y añadir el código que aparece abajo a la sección del cuerpo del documento:
< div clase = "youTube" >Pegar el código para el primer video aquí< / div >
Este código crea un bloque div HTML. Este bloque tendrá su primer video de YouTube.
2 Agregue el siguiente bloque div debajo el código que se muestra en el paso anterior:
< div clase = "youTube" >pegar el código para el segundo vídeo aquí< / div >
Este código crea otro bloque div que contendrá el segundo YouTube video. Tenga en cuenta que cada div hace referencia a una clase CSS llamada "youTube."
3 Moverse a la sección head del documento y agregar la clase CSS de youTube a la sección principal como se muestra a continuación:
estilo de < >.youTube {Mostrar: inline;}< / estilo >
Este código CSS establece atributo de pantalla de cada div "en línea". Esto hace que tus vídeos a mosaico horizontal a través de la página. Cuando una fila se llena, videos adicionales comienzan una segunda fila. Si usted prefiere apilar verticalmente los videos de los navegadores, reemplazar "en línea" con el "bloque".
4 Visite el sitio de YouTube y haga doble clic en un vídeo para reproducirlo en el reproductor de vídeo del sitio. Haz clic en el botón "Stop" del jugador y haga clic en "Compartir".
5 Haga clic en "Embed" y copia el código HTML que se muestra en el cuadro de texto que aparece. Este código consiste en un envase de iframe. Atributo de la URL del iframe apunta al URL del vídeo en la Web.
6 Volver al documento HTML y pegar el código copiado en la primera cuadra de div debajo del texto que dice "Pegar código para primer video aquí". Borrar este texto después de pegar el código en el bloque div. El primer bloque div entonces se verá similar a la que se muestra a continuación:
< div clase = "youTube" >< iframe width = "420" height = "315" src = "http://www.youtube.com/embed/9AumAucSAZ8 & amp; quot; frameBorder = "0" allowfullscreen >< / iframe >< / div >
7 Volver a YouTube, reproducir otro vídeo y haga clic en "Stop". Copie su código HTML y volver al documento HTML. Pegue el código en el segundo bloque div debajo del texto que lee, "Pegar código para primer video aquí." Elimine el texto después de pegar el código en el bloque div. Cada iframe tiene valores para anchura y altura en píxeles. Cambiar estos valores si quieres cambiar las dimensiones de los reproductores de vídeo.
8 Guardar el documento HTML y visualizarlo en su navegador. Aparecen los videos de YouTube que ha agregado a la Página Web. Haga clic en los botones "Play" para reproducir los vídeos.
Consejos y advertencias
- Añadir más vídeos de YouTube a su pantalla multi añadiendo bloques div adicional a su código HTML. Para agregar un tercer video, por ejemplo, copiar el código desde un tercer video de YouTube y pegarla en un nuevo bloque div debajo de los bloques existentes de div.
- Nota la dirección URL que aparece en cada bloque div. Hacer un video empieza a tocar automáticamente añadiendo "? autoplay = 1" - sin comillas - al final de cada URL.
- Ajustar las dimensiones de sus reproductores de vídeo para lograr el diseño de pantalla multi que desee.
Artículos relacionados
- Cómo hacer una pantalla verde Video "WoW" en WMM
- Cómo hacer una pantalla completa Video vivo
- Cómo hacer una pantalla de YouTube más pequeño
- Cómo hacer una pantalla verde en un Mac
- Cómo hacer una pantalla de un disparo en la palabra
- Cómo hacer una pantalla de título personalizada en la magia Lunar
- Cómo hacer una llamada de Video en la nueva versión de Yahoo Messenger Vista
- Cómo hacer un juego de Video de YouTube en Tumblr sin la pantalla
- Cómo hacer una pantalla interactiva de DVD