3

Resulta que estoy haciendo una ventana emergente solo con HTML que contiene un iframe de un video de Youtube, que no tiene ninguna restricción de contenido ni de inserción, pero al abrir esta ventana el video me dice que no se puede reproducir.

El código de mi HTML es el siguiente:

<html>
    <head>
        <meta charset="utf-8">
        <title>Documento sin título</title>
    </head>

    <body style="margin:0px;padding:0px;overflow:hidden;font-family: arial;  font-size: 12px;">
        <iframe src="https://www.youtube.com/embed/rIc8SPMrbvs?autoplay=1&amp;fs=0&amp;iv_load_policy=3&amp;showinfo=0&amp;rel=0&amp;cc_load_policy=0&amp;start=&amp;end=&amp;controls=1&amp;rel=0&amp;showinfo=0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" allow="autoplay; encrypted-media" height="100%" width="100%">
        </iframe>
    </body>
</html>

El video, esta público, permite ser embebido, no tiene restricciones de ningún tipo.

No entiendo porque no lo puedo reproducir en esta ventana emergente.

¿Alguien me puede ayudar?

2
  • Tengo una app en electrónica que hace usar de iframws y 0redente el mismo problema, parece que se oye de deber a tu conexión o simplemente fallos con YouTube, pues en mi casi espero un momento volví a intentar y funcionó
    – Christian
    el 8 jul. 2021 a las 4:31
  • Es un problema de Youtube, prueba con otros videos y verás que tu código es correcto.
    – Juan
    el 8 jul. 2021 a las 9:11

1 respuesta 1

0

Saludos he reescrito el proceso con un modal en html y css y funciona bien

<div id="modalVideo" class="modalDialog">
                        <div>
                            <a href="#close" title="Close" class="close">X</a>
                            <h3>Mi video</h3>
                             <div>
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/rIc8SPMrbvs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                             </div>
                        </div>
                    </div>

para implementarlo puedes utilizar este css y adaptarlo

/* para Modal */
 .modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

/* funcionalidad al modal*/
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
    margin-left:6
}

.modalDialog > div {
    width: 600px;
    
    position: relative;
    margin-left:6%;
    margin-top:16%;
    //margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #ddd);
    background: -webkit-linear-gradient(#fff, #ddd);
    background: -o-linear-gradient(#fff, #ddd);
}
/* cerrando el modal */
.close {
    background: #f02d00;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.