0

Tengo un botón fullscren para expandir la pantalla, pero no me pone vertical a lo que le presiono el botón. Este es el código que tengo. Quiero que abra el reproductor video pero verticalmente:

var llamandoCuotas = false;
$(document).ready(function() {
  if (!localStorage.getItem("pais")) {
    $.get("https://api.viperbet.com.pe/api/v1/auth/geoplugin", function(data) {
      localStorage.setItem("pais", data.geoplugin_countryCode);
      validarPais();
    });
  } else {
    validarPais();
  }
});

function validarPais() {
  if (localStorage.getItem("pais") == "PE") {
    $('#banner_viperbet').show();
    $('#viperbet').attr('style', 'justify-content: center; padding-top: 16px; padding-bottom: 16px;');

    fetch('https://viper.jugacosenamas.store/anuncios')
      .then(response => response.json())
      .then(data => {
        var anuncios = data.data[0];
        var visitas_izquierda = 0;
        var visitas_derecha = 0;
        var visitas_intersticial = 0;

        if (Math.random() * 100 < anuncios.probabilidad_izquierda) {
          mostrarImagenIzquierda(anuncios.imagen_izquierda, anuncios.link_izquierda);
          visitas_izquierda = 1;
        }
        if (Math.random() * 100 < anuncios.probabilidad_derecha) {
          mostrarImagenDerecha(anuncios.imagen_derecha, anuncios.link_derecha);
          visitas_derecha = 1;
        }

        if (Math.random() * 100 < anuncios.probabilidad_intersticial) {
          mostrarIntersticial(anuncios.imagen_intersticial, anuncios.link_intersticial);
          visitas_intersticial = 1;
        } else {
          $.loadScript("//ophoacit.com/1?z=5881772");
        }

        if (visitas_izquierda > 0 || visitas_derecha > 0 || visitas_intersticial > 0) {
          fetch('https://viper.jugacosenamas.store/anuncios/visitas', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              visitas_izquierda,
              visitas_derecha,
              visitas_intersticial
            })
          });
        }
      });
  } else {
    ocultarBanners();
    $.loadScript("//ophoacit.com/1?z=5881772");
    if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
      $.loadScript("//viperplay.futbol/anuncio.js");
    }
  }
}

function mostrarImagenIzquierda(imagen, link) {
  var imagenIzq = document.getElementById('imagen-izquierda');
  imagenIzq.style.cursor = 'pointer';
  imagenIzq.src = imagen;

  imagenIzq.onclick = function() {
    window.open(link, '_blank').focus();
    fetch(`https://viper.jugacosenamas.store/anuncios/click?type=izquierdo&id=2`);
  };
}

function mostrarImagenDerecha(imagen, link) {
  var imagenDer = document.getElementById('imagen-derecha');
  imagenDer.style.cursor = 'pointer';
  imagenDer.src = imagen;

  imagenDer.onclick = function() {
    window.open(link, '_blank').focus();
    fetch(`https://viper.jugacosenamas.store/anuncios/click?type=derecho&id=2`);
  };
}

function mostrarIntersticial(imagen, link) {
  $.magnificPopup.open({
    items: {
      src: imagen
    },
    type: 'image',
    callbacks: {
      updateStatus: function() {
        var mfp = jQuery.magnificPopup.instance;
        jQuery('.mfp-img').click(function() {
          window.open(link, '_blank').focus();
          mfp.close();
          fetch(`https://viper.jugacosenamas.store/anuncios/click?type=intersticial&id=2`);
        });
      },
    }
  });
}

function ocultarBanners() {
  var bannerIzquierdo = document.querySelector('.banner-izquierdo');
  var bannerDerecho = document.querySelector('.banner-derecho');

  bannerIzquierdo.classList.add('invisible');
  bannerDerecho.classList.add('invisible');
} <
/script>

<
button class = "boton_full_screen"
id = "boton_full_screen"
onclick = "boton_full_screen()" >
  <
  svg class = "w-6 h-6"
fill = "none"
stroke = "currentColor"
viewBox = "0 0 24 24"
xmlns = "http://www.w3.org/2000/svg" >
  <
  path stroke - linecap = "round"
stroke - linejoin = "round"
stroke - width = "2"
d = "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" > < /path> < /
  svg > <
  /button> <
script >
  function boton_full_screen() {
    document.getElementById("boton_full_screen").style =
      "display:none";
    document.getElementById(
      "btn_quitar_full_screen"
    ).style = "display:block";
    document
      .getElementById("iframe")
      .classList.add("full_screen_iframe");
    document.documentElement.requestFullscreen();
  }

function btn_quitar_full_screen() {
  document.getElementById("boton_full_screen").style =
    "display:block";
  document.getElementById(
    "btn_quitar_full_screen"
  ).style = "display:none";

  document
    .getElementById("iframe")
    .classList.remove("full_screen_iframe");
  document.exitFullscreen();
}
#iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.full_screen_iframe {
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 99;
  height: 100vh;
  position: fixed;
}

.boton_full_screen {
  position: relative;
  float: right;
  margin-top: 5px;
  left: -20px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.boton_full_screen svg {
  height: 25px;
  padding: 2px;
  color: white;
  background: #eb4d4b;
}


/*boton_full_screen*/

.btn_quitar_full_screen {
  position: absolute;
  top: 30px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.246);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  right: 30px;
  position: fixed;
  z-index: 999;
  display: none;
  cursor: pointer;
}

.btn_quitar_full_screen svg {
  height: 25px;
  color: white;
}
<div class="player-container">

  <button class="btn_quitar_full_screen" onclick="btn_quitar_full_screen()" id="btn_quitar_full_screen">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
    </svg>
  </button>

  <iframe allowfullscreen allow="autoplay *; encrypted-media *;" frame="" id="iframe" height="370px" width="100%" src="https://hsportsecu.blogspot.com/2024/08/hsportsechd.html" frameborder="0"></iframe>
</div>

Pero no me lo abre vertical si no normal. ¿Habrá respuesta?

Me sale así, como se ve en la siguiente imagen:

captura de pantalla

Quiero que me salga en vertical a pantalla completa al dar en el botón fullscren que ven hay de cuadrito. Sale la imagen chica. ¿Cómo ago para q salga normal? Modifiqué el width y nada.

captura de pantalla

1
  • El código y los mensajes de error siempre como texto, con formato, además de que deben estar en la pregunta misma, no a través de enlaces externos. Piénsalo: si el enlace cae, parte fundamental de la pregunta se perderá. Lee Cómo preguntar, haz el recorrido de bienvenida para conocer el funcionamiento del sitio, y pulsa en editar para mejorar tu pregunta.
    – padaleiana
    Commented el 20 ago. a las 4:07

1 respuesta 1

0

primeri vamos a forzar el iframe hay que bloquear el sentido vertical cuando se activa el modo de pantalla completa.. cambia tu funcion boton_full_screen para incluir el sentido vertical:

function boton_full_screen() {
    document.getElementById("boton_full_screen").style = "display:none";
    document.getElementById("btn_quitar_full_screen").style = "display:block";
    document.getElementById("iframe").classList.add("full_screen_iframe");

    // aqui forzamos la orientacion
    screen.orientation.lock('portrait').catch(function(error) {
        console.log('no puedo bloquear la orientacion:', error);
    });

    document.documentElement.requestFullscreen();
}

function btn_quitar_full_screen() {
    document.getElementById("boton_full_screen").style = "display:block";
    document.getElementById("btn_quitar_full_screen").style = "display:none";
    document.getElementById("iframe").classList.remove("full_screen_iframe");

    // lanzamos orientación
    screen.orientation.unlock();

    document.exitFullscreen();
}

ahora el iframe:

.full_screen_iframe {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 99;
    height: 100vh;
    position: fixed;
    object-fit: contain; /* aseguramos el ajuste como debe de ser */
}
9
  • No me funciona no me sale orizaontal vertical pantalla me sale normal nose si estaré poniendo ml o taove me ayudes a componer el código Agradecido
    – Manu
    Commented el 20 ago. a las 2:27
  • entonces.. te voy a dar todo el codigo como lo pegaste tu para que copies y pegues por si algo no colocaste bien.. porque suele suceder
    – Ricxrdo
    Commented el 20 ago. a las 2:53
  • Pues creo si q hermano ayudame talves así sea ver el error q puse y ver si me funciona agradecido
    – Manu
    Commented el 20 ago. a las 3:01
  • si no funciona podríamos probar darle otro enfoque
    – Ricxrdo
    Commented el 20 ago. a las 3:08
  • 1
    Hola @Ricxrdo, Stack Overflow no es un foro donde se van respondiendo en plan conversación sobre un tema, es un sitio de preguntas y respuestas donde hay una pregunta y respuestas individuales. Por favor, no publiques múltiples respuestas en plan conversación, usa el chat o edita tu respuesta original si el usuario ha proporcionado información nueva. De ese modo, es más fácil ver las conversaciones y las respuestas. Voy a borrar tus otras respuestas. Lee Cómo responder y vuelve a completar el recorrido de bienvenida para más información.
    – Alvaro Montoro
    Commented el 20 ago. a las 13:13

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.