LISTA DE REPRODUCCION DE VIDEOS DE YOUTUBE CON HTML PARA TU PAGINA WEB
(Sin necesidad de tener tu cuenta propia en youtube)
Puedes agregar cuantos videos quieras a la lista, tienen un diseño moderno que quedará perfecto y
llamará la atencion de todos tus visitantes. Para tenerlo en tu web sigue los siguientes pasos:
PASO 1.- Copia todo el codigo html y pegalo en el BODY de tu pagina, ( en jimdo inicias secion - vas a AÑADIR MÓDULO y das donde dice WIDGET/HTML y pegas todo y das GUARDAR los cambios.)
PASO 2.- IMPORTANTE le das like a esta pagina si no, no funciona.
PASO 3.- Ignora el paso 2 Eso es para entretenerlos porque solo necesitas un solo paso :D.
Para agregar un video vas youtube, buscas el que te guste y los reproduces despues te vas a la dirección del video es así:
https://www.youtube.com/watch?v=8PTDv_szmL0
Del cual solo necesitas la ID del video que esta marcado en rojo en todos los videos es lo mismo esa ID la vas a llevar al codigo html que dejó abajo que igualmente dejé marcado en rojo para que identifique con facilidad donde debe estar y con azul el nombre del video este comando &autoplay=1 es para que el video comience a reproducir automaticamente si no deseas que asi suceda solo lo borras. El primer link es el que se verá siempre al abrir la pagina.
<div id="bg-playlist-n" style=
"background-image: url(http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i9e1c3da81b40d6dd/1375646740/std/bg-play-list-2.png); height: 311px; width: 520px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; padding-top: 9px; background-repeat: no-repeat;">
<div class="wrap" style="height: 280px; width: 500px; background-color: rgba(58, 58, 58, 0.36); margin-top: 0px; margin-right: auto; margin-left: auto; margin-bottom: 0px;">
<iframe allowfullscreen="" name="video" src="http://www.youtube.com/embed/8PTDv_szmL0?feature=player_detailpage&autoplay=1" frameborder="0" width="500" scrolling="no" height="280" id="video" ></iframe>
</div>
</div>
<center>
<select name="name" onchange="video.location.href=this.options[this.selectedIndex].value">
<option value="http://www.youtube.com/embed/8PTDv_szmL0?feature=player_detailpage&autoplay=1">
B.o.B - Nothin On You
</option>
<option value="http://www.youtube.com/embed/UHQt1eTOWEo?feature=player_detailpage&autoplay=1">
YO NO VOTE POR TÍ - Akil Ammar
</option>
<option value="http://www.youtube.com/embed/NB9IW4LAngU?feature=player_detailpage&autoplay=1">
Cree y Atrevete - Tinkerbell
</option>
</select>
</center>
nota: no se deben manipular las medidas ya que saldría de cuadro el video
Hen (sábado, 30 septiembre 2023 20:19)
Epero no aver echo algo fuera de los derechos del codigo pero si se pueden poner enlaces de otras cosas no solo de youtube es muy facil les dejare un ajemplo de como pondran el enlace q quieran q aparesca de video por si quieren poner pelis series y no estan subidas a youtube ejemplo (https://uqload.co) se puede.
EJEMPLO:
<option
value="https://uqload.co/embed-j4rctabbuml2.html?feature=player_detailpage&autoplay=1">
Titulo del video
</option>
ORIGINAL:
<option
value="http://www.youtube.com/embed/UnD8L-xbZpA?feature=player_detailpage&autoplay=1">
Titulo del video
</option>
como ven el codigo se quede lo unico q cambia es desde http://www.youtube.com/embed/UnD8L-xbZpA y ya de aqui (?feature=player_detailpage&autoplay=1) se queda como estaba.
y el video q se mostrara de inicio como el titulo 01 tambien osea este:
<div class="wrap"
style="height: 280px; width: 500px; background-color: rgb(0, 0, 0); margin-top: 0px; margin-right: auto; margin-left: auto; margin-bottom: 0px;">
<iframe allowfullscreen="" name="video"
src="https://uqload.co/embed-j4rctabbuml2.html?feature=player_detailpage" frameborder="0"
width="500" scrolling="no" height="280" id="video"></iframe>
</div>
solo cambien donde esta <iframe allowfullscreen="" name="video"
src="https://uqload.co/embed-j4rctabbuml2.html?feature=player_detailpage" frameborder="0"
width="500" scrolling="no" height="280" id="video"></iframe> y cambien desde https://uqload.co/embed-j4rctabbuml2.html y ya desde ?feature en adelante no se cambia nada solo el link o enlace q esta ahi y ponen el suyo o el q quieran mostrar en el titulo: no se si ya estaba descubierto esto pero yo lo descubri soy una persona q le gusta mucho cambiar las cosas o intentar hacerlo mejor ya q tambien estoy con mi pagina de anime y poreso hice eso. ATTM: Jose con acento en la E
espero les aya servido y si no saben o no me entendieron solo digan en mi comentario y les ayudo pasandoles mi face y un video
Nico (viernes, 27 marzo 2020 22:36)
Hola, muy buen tutorial y gracias por dejar el código de programación.
Pero tengo una duda ¿cómo puedo agregar otras opciones de video de otras páginas que no sea youtube?
SERGIO (jueves, 17 agosto 2017 23:22)
GRACIAS PERO QUIERO SAVER SI SEPUEDE REPRODUCIR VIDEO DESDE MY PC