0

Me gustaría que quedara así en vertical: me gustaria que quedara asi en vertical y así en horizontal: y asi en horizontal

Me gustaría que quedara como en las imágenes manteniendo el responsive. Tiene en el css un left y no sé cómo arreglarlo para que quede perfecto de todos los lados; el ícono de cerrar también quisiera que quedara bien. He intentado poner en todo el html y también en el body al 100% pero este código en específico no deja acomodarlo como yo quisiera.

  <!DOCTYPE html>
  <html lang="en">
 <head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>entrada</title>

 <style>
* {
  margin: 0;
  padding: 0; 
 width: 100%;
}

body {
  font-size: 62.5%; 

}

 /* Banner CSS */
.container {
  position: absolute;
 

}



.video-banner {
  width: 100%;
  height: 100%; }

.video-banner-link {
  transition: all 0.1s ; }

 .video-banner-link:hover {
  opacity: 0.8; }

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  z-index: 100;
  transition: all 0.1s ;
  background: rgba(0, 0, 0, 0.85); }

.modal-video-container {
  position: absolute;
  top: 0%;
  left: 15%;
  transform: scale(1);
  width: 50%;
  height: 100%;
  
  transition: all 0.1s  }

.video-popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 70%;
  height: 70%;
  transition: all 0.1s ; }

@media only screen and (min-width: 1300px) {
  .modal-video-container {
    top: 10%; } }

@media only screen and (max-height: 1024px) {
  .video-popup {
    width: 85%;
    height: 90%; }
  .modal-video-container {
    left: 7%; } }

@media only screen and (max-width: 100%) {
  .video-popup {
    width: 85%;
    height: 90%; }
  .modal-video-container {
    left: 7%; } }

.close {
  position: absolute;
  width: 100%;
  height: 50px;
  z-index: 100;
  font-size: 2rem;
  color: #fff;
  cursor: pointer; }

.close > span {
  position: absolute;
  left: 95%;
  top: 50%; }



modal-video{
 width: 90%;
 max-width: 800px;
 transform: scale(0);
 box-shadow: 0 20px 20px rgba(0,0,0,0.2);
 outline: none;
 transition: all 0.3s;

}


 button{
    text-decoration: none;
      padding: 5px;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
 
    border-radius: 6px;
    cursor: pointer;
     background: linear-gradient(to bottom, #414142, #040404);
  }

p {
 
  
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
 
}

/*-- para la pantalla  horizontal ---*/
@media (orientation:landscape){


.video-popup iframe{
 
    height: 70%!important;






 }

</style>

</head>
<body bgcolor="black">



    <div class="modal" id="modal">
      <div class="close"><span class="close" id="close">×</span></div>
      <div class="modal-video-container" id="mdc">

<iframe class="video-popup" width="100%" height="500 vh" allowfullscreen id="modal-video" frameborder="0" onload="$('.iframe-loading').css('background-image', 'none');" sandbox="allow-same-origin allow-scripts" scrolling="no" style="background-color: #000; border: 2px solid red; border-radius: 5px"></iframe>

   
      </div>
    </div>
    <div class="container">
</br><a class="video-banner-link" href="https://pelistop.co/embed-8f6y3rkjn0m7.html" data-vidup>

       <button class="video-banner">Peliculas </button><br>
</br><a class="video-banner-link" href="https://pelistop.co/embed-8f6y3rkjn0m7.html" data-vidup>
  <button class="video-banner">Estrenos </button><br>


<script>

/* Data VidUp */

/* Get all elements with data-vidup */
const vidupElements = document.querySelectorAll('[data-vidup]');

const modal = document.getElementById('modal');
const modalVideo = document.getElementById('modal-video');
const mdc = document.getElementById('mdc');
const close = document.getElementById('close');

function closeModal() {
    // mdc.style.width = "0";
    mdc.style.transform = "scale(0)";
    
    setTimeout(() => {
        modal.style.visibility = "hidden";
        modal.style.opacity = "0";
        modalVideo.src = "";  
    }, 500);
}

function showModal(element) {
    modal.style.visibility = "visible";
    modal.style.opacity = "1";
    modalVideo.src = element.href;
    mdc.style.width = "100%";


    setTimeout(() => {
        mdc.style.transform = "scale(1)";
    }, 300);

}

/* Foreach element add an eventlistener and show the popup when clicked and add the src in the link */
vidupElements.forEach(element => {
    element.addEventListener("click", (e) => {

        e.preventDefault();
        showModal(element);
    });
});

close.addEventListener('click', (e) => {
    closeModal();
});

mdc.addEventListener('click', () => {
    closeModal();
});

modal.addEventListener('click', () => {
    closeModal();
});

</script>

</body>
</html>

3
  • 1
    ¿Puedes añadir un ejemplo de como quieres que quede? Una imagen podría ayudar. Por cierto, fíjate que el código está fallando porque intentas usar jQuery sin haber colocado la referencia necesaria.
    – Mateo
    Commented el 30 ago. 2021 a las 4:25
  • Cómo exactamente debe estar el modal? Centrado en los cuatros lados? Commented el 30 ago. 2021 a las 4:25
  • Y el icono de cerrar? Donde? Al centro? Commented el 30 ago. 2021 a las 4:26

2 respuestas 2

1

Solo modifique un poco el contenedor del modal para lograr acomodar el icono de cerrar y para acomodar y centrar el modal y acomodar los espacios, debes usar tecnicas responsive para adpatarlo a cualquier dispositivo y que se vea centrado

<!DOCTYPE html>
  <html lang="en">
 <head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>entrada</title>

 <style>
* {
  margin: 0;
  padding: 0; 
 width: 100%;
}

body {
  font-size: 62.5%; 

}

 /* Banner CSS */
.container {
  position: absolute;
 

}



.video-banner {
  width: 100%;
  height: 100%; }

.video-banner-link {
  transition: all 0.1s ; }

 .video-banner-link:hover {
  opacity: 0.8; }

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  z-index: 100;
  transition: all 0.1s ;
  background: rgba(0, 0, 0, 0.85); }

.modal-video-container {
  position: absolute;
  top: 0%;
  left: 15%;
  transform: scale(1);
  width: 50%;
  height: 100%;
  
  transition: all 0.1s  }

.video-popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 70%;
  height: 70%;
  transition: all 0.1s ; }

@media only screen and (min-width: 1300px) {
  .modal-video-container {
    top: 10%; } }

@media only screen and (max-height: 1024px) {
  .video-popup {
    width: 85%;
    height: 90%; }
  .modal-video-container {
    left: 7%; } }

@media only screen and (max-width: 100%) {
  .video-popup {
    width: 85%;
    height: 90%; }
  .modal-video-container {
    left: 7%; } }

.close {
  position: absolute;
  width: 100%;
  height: 50px;
  z-index: 100;
  font-size: 2rem;
  color: #fff;
  cursor: pointer; }

.close{
    margin: 0;
    width: 108.5%;
    height: 95px;
    margin-left: -50px;
    z-index: 1;
    margin-top: -30px;
    padding-top: 14px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

 #close {
      border: 0;
      background: none;
      font-size: 20px;
      cursor: pointer;
      border-radius: 50%;
      width: 50px;
      margin-left: 85%;
      color:white;
      margin-top:15px;}


modal-video{
 width: 90%;
 max-width: 800px;
 transform: scale(0);
 box-shadow: 0 20px 20px rgba(0,0,0,0.2);
 outline: none;
 transition: all 0.3s;

}


 button{
    text-decoration: none;
      padding: 5px;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
 
    border-radius: 6px;
    cursor: pointer;
     background: linear-gradient(to bottom, #414142, #040404);
  }

p {
 
  
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
 
}

/*-- para la pantalla  horizontal ---*/
@media (orientation:landscape){


.video-popup iframe{
 
    height: 70%!important;






 }

</style>

</head>
<body bgcolor="black">



    <div class="modal" id="modal">
      <div class="close"><button id="close">X</button></div>
      <div class="modal-video-container" id="mdc">

<iframe class="video-popup" width="100%" height="500 vh"          allowfullscreen id="modal-video" frameborder="0" onload="$('.iframe-loading').css('background-image', 'none');" sandbox="allow-same-origin allow-scripts" scrolling="no" style="background-color: #000; border: 2px solid red; border-radius: 5px"></iframe>

   
      </div>
    </div>
    <div class="container">
</br><a class="video-banner-link" href="https://pelistop.co/embed-8f6y3rkjn0m7.html" data-vidup>

       <button class="video-banner">Peliculas </button><br>
</br><a class="video-banner-link" href="https://pelistop.co/embed-8f6y3rkjn0m7.html" data-vidup>
  <button class="video-banner">Estrenos </button><br>


<script>

/* Data VidUp */

/* Get all elements with data-vidup */
const vidupElements = document.querySelectorAll('[data-vidup]');

const modal = document.getElementById('modal');
const modalVideo = document.getElementById('modal-video');
const mdc = document.getElementById('mdc');
const close = document.getElementById('close');

function closeModal() {
    // mdc.style.width = "0";
    mdc.style.transform = "scale(0)";
    
    setTimeout(() => {
        modal.style.visibility = "hidden";
        modal.style.opacity = "0";
        modalVideo.src = "";  
    }, 500);
}

function showModal(element) {
    modal.style.visibility = "visible";
    modal.style.opacity = "1";
    modalVideo.src = element.href;
    mdc.style.width = "100%";


    setTimeout(() => {
        mdc.style.transform = "scale(1)";
    }, 300);

}

/* Foreach element add an eventlistener and show the popup when clicked and add the src in the link */
vidupElements.forEach(element => {
    element.addEventListener("click", (e) => {

        e.preventDefault();
        showModal(element);
    });
});

close.addEventListener('click', (e) => {
    closeModal();
});

mdc.addEventListener('click', () => {
    closeModal();
});

modal.addEventListener('click', () => {
    closeModal();
});

</script>

</body>
</html>

1

Ya logré acomodarlo bien usando @media, creo que también se podría hacer usando display Flex pero tendría que ponerme a borrar códigos y empezarlo a acomodarlo asique creo que ésta fue la forma más fácil de hacerlo, solo que los elementos que salen que no están definidos nose cuales son, y tampoco sé si tendría que borrarlos, pero el código funciona de todas maneras.

<!DOCTYPE html>
  <html lang="en">
 <head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>entrada</title>

 <style>
* {
  margin: 0;
  padding: 0; 
 width: 100%;
}

body {
  font-size: 62.5%; 

}

 /* Banner CSS */
.container {
  position: absolute;
 

}



.video-banner {
  width: 100%;
  height: 100%; }

.video-banner-link {
  transition: all 0.1s ; }

 .video-banner-link:hover {
  opacity: 0.5; }

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  z-index: 100;
  transition: all 0.1s ;
  background: rgba(0, 0, 0, 0.85); }

.modal-video-container {
  position: absolute;
  top: 0%;
  left: 15%;
  transform: scale(1);
  width: 100%;
  height: 80%;
  
  transition: all 0.1s  }



@media  {
  .modal-video-container {
    top: 15%; } }

@media  {
  .video-popup {
    width: 65%;
    height: 90%; }
  .modal-video-container {
    left: 17%; } }



.close {
  position: absolute;
  width: 100%;
  height: 50px;
  z-index: 100;
  font-size: 2rem;
  color: #fff;
  cursor: pointer; }

.close{
 cursor: pointer;
    margin: 0;
    width: 108.5%;
    height: 3px;
    margin-left: -50px;
    z-index: 1;
    margin-top: -30px;
    padding-top: 14px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

 #close {
      border: 0;
      background: none;
      font-size: 20px;
      cursor: pointer;
      border-radius: 50%;
      width: 50px;
      margin-left: 85%;
      color:white;
      margin-top:15px;}


modal-video{
 width: 90%;
 max-width: 800px;
 transform: scale(0);
 box-shadow: 0 20px 20px rgba(0,0,0,0.2);
 outline: none;
 transition: all 0.3s;

}


 button{
    text-decoration: none;
      padding: 5px;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
 
    border-radius: 6px;
    cursor: pointer;
     background: linear-gradient(to bottom, #414142, #040404);
  }

p {
 
  
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
 
}

/*-- para la pantalla  horizontal ---*/
@media (orientation:portrait){


  .video-popup {
    width: 85%;
    height: 65%; }
  .modal-video-container {
    left: 7%; } }

@media (orientation:portrait){

  .modal-video-container {
    top: 20%; } }

@media (orientation:portrait){


   #close {
 
      margin-left: 90%;
      margin-top: 40px;
      
      } }


 }

</style>

</head>
<body bgcolor="black">



    <div class="modal" id="modal">
      <div class="close"><button id="close">✖</button></div>
      <div class="modal-video-container" id="mdc">

<iframe class="video-popup" width="100%" height="500 vh"          allowfullscreen id="modal-video" frameborder="0" onload="$('.iframe-loading').css('background-image', 'none');" sandbox="allow-same-origin allow-scripts" scrolling="no" style="background-color: #000; border: 2px solid red; border-radius: 5px"></iframe>

   
      </div>
    </div>
    <div class="container">
</br><a class="video-banner-link" href="https://uqload.com/embed-vbjgpta9c1uo.html" data-vidup>

       <button class="video-banner">Peliculas </button><br>
</br><a class="video-banner-link" href="https://pelistop.co/embed-8f6y3rkjn0m7.html" data-vidup>
  <button class="video-banner">Estrenos </button><br>


<script>

/* Data VidUp */

/* Get all elements with data-vidup */
const vidupElements = document.querySelectorAll('[data-vidup]');

const modal = document.getElementById('modal');
const modalVideo = document.getElementById('modal-video');
const mdc = document.getElementById('mdc');
const close = document.getElementById('close');

function closeModal() {
    // mdc.style.width = "0";
    mdc.style.transform = "scale(0)";
    
    setTimeout(() => {
        modal.style.visibility = "hidden";
        modal.style.opacity = "0";
        modalVideo.src = "";  
    }, 500);
}

function showModal(element) {
    modal.style.visibility = "visible";
    modal.style.opacity = "1";
    modalVideo.src = element.href;
    mdc.style.width = "100%";


    setTimeout(() => {
        mdc.style.transform = "scale(1)";
    }, 300);

}

/* Foreach element add an eventlistener and show the popup when clicked and add the src in the link */
vidupElements.forEach(element => {
    element.addEventListener("click", (e) => {

        e.preventDefault();
        showModal(element);
    });
});

close.addEventListener('click', (e) => {
    closeModal();
});

mdc.addEventListener('click', () => {
    closeModal();
});

modal.addEventListener('click', () => {
    closeModal();
});

</script>

</body>
</html>

Tu Respuesta

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

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