Vídeo jQuery responsive
Publicado por Kike (2 intervenciones) el 19/12/2016 12:08:58
Buenos días,
Tengo un problema con con jQuery y me gustaría que me pudieran ayudar.
Quiero introducir un vídeo en mi web cuando el navegador tenga de ancho de pantalla más de 905px, y cuando tenga menos que se cargue una foto. He intentado varias cosas y al final lo he dejado así:
Código HTML:
Código CSS:
Código JS:
El problema está en que cada vez que redimensiono la pantalla (siendo esta de más de 905px) el vídeo se reinicia. ¿Podríais ayudarme con este tema? ¿Veis alguna solución?
Muchas gracias y un saludo!
Tengo un problema con con jQuery y me gustaría que me pudieran ayudar.
Quiero introducir un vídeo en mi web cuando el navegador tenga de ancho de pantalla más de 905px, y cuando tenga menos que se cargue una foto. He intentado varias cosas y al final lo he dejado así:
Código HTML:
1
2
3
onload="fotoVideo()" onresize="fotoVideo()"
<div id="fot"></div>
<div id="vid"></div>
Código CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
#foto{
height: 100%;
background: url(img/coloresFondo4.jpg) no-repeat top left fixed ;
background-size: cover;
}#video{
position: fixed; top: 0;width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}Código JS:
1
2
3
4
5
6
7
8
9
10
fotoVideo();
function fotoVideo(){
if(window.innerWidth>905){
document.getElementById("fot").innerHTML="<div id='' class=''></div>";
document.getElementById("vid").innerHTML="<video autoplay loop muted id='video' class='resto'><source src='img/tiroLlull.mp4' type='video/mp4'></source></video>";
}else{
document.getElementById("vid").innerHTML="<video><source src='' type=''></source></video>";
document.getElementById("fot").innerHTML="<div id='foto' class='resto'></div>";
}}El problema está en que cada vez que redimensiono la pantalla (siendo esta de más de 905px) el vídeo se reinicia. ¿Podríais ayudarme con este tema? ¿Veis alguna solución?
Muchas gracias y un saludo!
Valora esta pregunta
0
