cambiar volores de alto y ancho de videos

azuel · #1 (**permalink**) 20/11/2009, 05:30

Hola a todos me gustaria saber como puedo cambiar los valores del alto y el ancho de un video embevido en mi web con javaScript .
Lo que quiero hacer es insertar dos botones uno q sea agrandar y otro Restaurar
y q al pulsar sobre estos botones se haga mas grande el video o mas pequeño
se que tengo que coloca variables pero no se capturar el valor de esas variables en las funciones que tengo que llamar para poder cambiar el alto y el ancho del video
Muchisimas Gracias de antemano

Adler · #2 (**permalink**) 20/11/2009, 05:48

Hola

Cita:

document.getElementById('elvideo').style.width=anc ho_video;
document.getElementById('elvideo').style.height=al to_video;

donde ancho_video y alto_video son el valore de los argumentos que le has pasado a la función

Suerte

azuel · #3 (**permalink**) 20/11/2009, 05:54

Esto ya lo havia intentado pero lo q consigo es agrandar la capa no el video
Gracias de toda de todas formas

Panino5001 · #4 (**permalink**) 20/11/2009, 05:56

En realidad depende del tipo de video y cómo esté incrustado. No es lo mismo si estás hablando del tag video o de un video .mov o windows-media o flash. Tampoco es lo mismo si está incrustado con innerHTML o con swfObject o AC_RunActiveContent. Deberás suministrar más datos para obtener una ayuda más eficaz.

azuel · #5 (**permalink**) 20/11/2009, 05:59

Cita:

el tipo de embebido es el de youtube normal

Yo quiero hacer algo simila a lo que hace Tuenti con los videos q tiene un boton donde los hace mas grande o mas pequeños
y perdonen por la falta de informacion

azuel · #6 (**permalink**) 20/11/2009, 06:00

Yo quiero hacer algo simila a lo que hace Tuenti con los videos q tiene un boton donde los hace mas grande o mas pequeños
y perdonen por la falta de informacion

Adler · #7 (**permalink**) 20/11/2009, 06:05

Hola

Ok te doy el código que se basa en lo que te mencioné anteriormente. Solo has de editarlo para adaptarlo a tus necesidades

Código javascript:

Ver original<html>
<head>
<title></title>
<script type="text/javascript">
function solonumeros(evt) {
var keyPressed = (evt.which) ? evt.which : event.keyCode
    return !(keyPressed > 31 && (keyPressed < 48 || keyPressed > 57));
}
 
 
function calculalo() {
    document.getElementById('elalto').value=parseInt((document.getElementById('elancho').value*662)/994);
}
 
 
var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
function iecompattest() {
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
 
 
function cambialo() {
// Esto ha de estar antes que var cabecera_height
var ancho_video = document.getElementById('elancho').value;
var alto_video = document.getElementById('elalto').value;
    document.getElementById('elvideo').style.width=ancho_video;
    document.getElementById('elvideo').style.height=alto_video;
// Fin condicion
 
var window_height = ieNOTopera? iecompattest().clientHeight : window.innerHeight;
var window_width = ieNOTopera? iecompattest().clientWidth : window.innerWidth;
//FF
//var cabecera_height = document.getElementById('contenido').clientHeight;
//var pie_height = document.getElementById('pie').clientHeight;
//var cabecera_width = document.getElementById('contenido').clientWidth;
//IE
//var cabecera_height = document.getElementById('contenido').scrollHeight;
//var pie_height = document.getElementById('pie').scrollHeight;
//var cabecera_width = document.getElementById('contenido').scrollWidth;
 
if (document.Element || document.body){
var cabecera_height = document.getElementById('contenido').scrollHeight;
var pie_height = document.getElementById('pie').scrollHeight;
var cabecera_width = document.getElementById('contenido').scrollWidth;
} else {
var cabecera_height = document.getElementById('contenido').clientHeight;
var pie_height = document.getElementById('pie').clientHeight;
var cabecera_width = document.getElementById('contenido').clientWidth;
}
 
 
var total_Height = parseInt(cabecera_height) + parseInt(pie_height);
 
//alert("Ventana disponible largo " + window_height)
//alert("Ventana disponible ancho " + window_width)
//alert("Ancho Video " + ancho_video)
//alert("Ancho Cabecera " + cabecera_width)
//alert("Total " +total_Height) 
 
 
 
        if (total_Height < window_height) { 
            document.getElementById('veocine').style.height= window_height;
        }
        else
        {
            document.getElementById('veocine').style.height=total_Height;
        }
 
        if (ancho_video < cabecera_width) {
            document.getElementById('veocine').style.width=window_width;
        }
        else
        {
            document.getElementById('veocine').style.width=parseInt(ancho_video)+20;
        }
 
}
 
 
 
 
function modocine() {
var cuentanos = 0;
var decimas = 0;
document.getElementById('veocine').style.display='';
while (cuentanos < 80) {
decimas = cuentanos/100;
document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
document.getElementById('veocine').style.MozOpacity=decimas;
document.getElementById('veocine').style.opacity=decimas;
document.getElementById('veocine').style.khtmlOpacity=decimas;
cuentanos += 10;
cuentanos = parseInt(cuentanos);
}
document.getElementById('modocine').style.display='none';
document.getElementById('modocine').style.visibility='hidden';
document.getElementById('modonormal').style.display='';
document.getElementById('modonormal').style.visibility='visible';
}
 
 
function modonormal() {
var cuentanos = 100;
var decimas = 1;
document.getElementById('veocine').style.display='none';
while (cuentanos <= 80) {
decimas = cuentanos/100;
document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
document.getElementById('veocine').style.MozOpacity=decimas;
document.getElementById('veocine').style.opacity=decimas;
document.getElementById('veocine').style.khtmlOpacity=decimas;
cuentanos -= 10;
cuentanos = parseInt(cuentanos);
}
document.getElementById('modonormal').style.display='none';
document.getElementById('modonormal').style.visibility='hidden';
document.getElementById('modocine').style.display='';
document.getElementById('modocine').style.visibility='visible';
}
 
 
function opacidad(valor) {
cuentanos = document.getElementById('veocine').style.MozOpacity*100;
switch (valor) {
case "mas":
if(cuentanos < 100) {
cuentanos += 10;
cuentanos = parseInt(cuentanos);
decimas = cuentanos/100;
document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
document.getElementById('veocine').style.MozOpacity=decimas;
document.getElementById('veocine').style.opacity=decimas;
document.getElementById('veocine').style.khtmlOpacity=decimas;
}
break;
case "menos":
if(cuentanos > 30) {
cuentanos -= 10;
cuentanos = parseInt(cuentanos);
decimas = cuentanos/100;
document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
document.getElementById('veocine').style.MozOpacity=decimas;
document.getElementById('veocine').style.opacity=decimas;
document.getElementById('veocine').style.khtmlOpacity=decimas;
}
break;
}
}
</script>
</head>
<body>
 
 
<div id="contenido" align="center" style="" valign="top">
<div id="veocine" style="overflow: auto; display: none; opacity: 0; position: absolute; width: 100%; height: 100%; z-index: 2; left: 0px; top: 0px; background-color: rgb(0, 0, 0);">
<div id="modonormal" style="margin-top: 20px; display: none;">
<input type="button" onclick="modonormal()" value="Desactivar Modo Cine"/>
<input type="button" onclick="opacidad('menos')" value="-"/>
<input type="button" onclick="opacidad('mas')" value="+"/>
</div>
</div>
 
<div align="center">
<i><font color="red">* Introduce unos valores numericos para cambiar el tamaño del video (ancho/alto)</font></i>
<br/>
<i><font color="red">* el cambio de tamaño no resetea la carga del video, puedes usarlo sin problemas.</font></i>
<div>
ANCHO: <input id="elancho" type="text" onkeypress="return solonumeros(event)" onkeyup="calculalo()" maxlength="4" size="10" value="390"/>
ALTO: <input id="elalto" type="text" disabled="disabled" onkeypress="return solonumeros(event)" maxlength="4" size="10" value="259"/>
<input type="button" onclick="cambialo()" value="Cambiar Tamaño"/>
<input type="button" id="modocine" onclick="modocine()" value="Activar Modo Cine"/>
</div>
 
 
<div style="z-index:3;">
<center>
<object width="390px" height="259px">
<param name="movie" value="http://www.youtube.com/v/3BPDMXhXeAU&hl=es&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed id="elvideo" src="http://www.youtube.com/v/3BPDMXhXeAU&hl=es&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="390px" height="259px"></embed>
</object>
</center>
</div>
 
<br/>
 
<div id="pie" align="center" style="z-index: 3; font-family: verdana,arial; font-size: 12px; font-weight: bold;position:relative; bottom:2px;">
Copyright 2008-2009.
<br/>
Todos los videos son externos a nosotros.
</div>
 
</body>
</html>

Suerte

azuel · #8 (**permalink**) 20/11/2009, 06:06

muchas gracias!!!

Panino5001 · #9 (**permalink**) 20/11/2009, 06:21

Probá algo así:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script>
var w=425;
var h=344;
var em='<object width="{w}" height="{h}"><param name="movie" value="http://www.youtube.com/v/GUj829kvjck&hl=es_ES&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/GUj829kvjck&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="{w}" height="{h}"></embed></object>';
function setMedida(w,h){
	window.w=w;
	window.h=h;
	var r=em.replace(/\{[^\}]*\}/g, function(key){
        return window[key.slice(1,-1)];
        });
	document.getElementById('video').innerHTML=r;

}
onload=function(){
	setMedida(425,344);
}
</script>
</head>

<body>
<div id="video"></div>
<form>
<input type="button" value="+" onclick="setMedida(w*1.1,h*1.1)" />

<input type="button" name="Submit" value="-" onclick="setMedida(w/1.1,h/1.1)"  />
</form>
</body>
</html>

Ah, veo que se me adelantaron, ja, ja.