XFileSharing Pro - Width and height changer for Embed code

Message
Author
thebeer
Posts: 47
Joined: Feb 01, 2010 9:41 am

Width and height changer for Embed code

#1 Postby thebeer » Mar 27, 2010 1:58 pm

Hi, how do I add a width and height changer for the embed code?
Like in this site: http://loombo.com/e7qzs1s52rit/Astmas.C ... .chri.html

komi
Posts: 161
Joined: Nov 27, 2009 12:41 pm

#2 Postby komi » Mar 27, 2010 2:01 pm

Check their source. It's done with JavaScript.

thebeer
Posts: 47
Joined: Feb 01, 2010 9:41 am

#3 Postby thebeer » Mar 27, 2010 2:05 pm

I did check their source, just can't figure what to place in embed code
The code looks like this atm.

Code: Select all

<div class="tabbertab">

<h2><TMPL_VAR lang_emded_code></h2><br>

<textarea id="ic4-<TMPL_VAR file_id>" style="width:98%;" rows=3 onFocus="copy(this);"><IFRAME SRC="<TMPL_VAR site_url>/embed-<TMPL_VAR file_code>.html" FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=<TMPL_VAR vid_width> HEIGHT=<TMPL_VAR vid_height>></IFRAME></textarea><br><br>

<strong>Width :</strong><input type="text" onchange="updateEmbedSize('width',this.value)" value="640" size="3" id="embed_width"><strong>Height :</strong><input type="text" onchange="updateEmbedSize('height',this.value)" value="318" size="3" id="embed_height">

<div id="c4-<TMPL_VAR file_id>" class="btndiv"><TMPL_VAR lang_copy_clipboard>
</div>
</div>

komi
Posts: 161
Joined: Nov 27, 2009 12:41 pm

#4 Postby komi » Mar 27, 2010 2:17 pm

The code you need (be sure to change the URLs):

Code: Select all

<script type="text/javascript">
function $(elem){return document.getElementById(elem);}
function updateEmbedSize(changed,mov) {
var aspectratio=2.0125786163522;
	var width = parseInt($('embed_width').value);
	var height = parseInt($('embed_height').value);
	if (changed == 'width') {
	 var new_height = Math.round(width / aspectratio) + 35;
    height = new_height;
	 $('embed_height').value=new_height.toString();
	}
	if (changed == 'height'){
	 var new_width = Math.round((height - 35) * aspectratio)	
    width = new_width;
	 $('embed_width').value = new_width.toString();
	}
   height=height+35;
   $('video_embed_code').value = "<iframe style='overflow:hidden;border:0;width:" + width.toString() + "px;height:" + height.toString() + "px' src='http://site.com/cgi-bin/index.cgi?op=embed_video&id=80849&vid_width=" + width.toString() + "&vid_height=" + (height - 35).toString() + "&vid_type=movie" + "' scrolling='no'></iframe>";
}
</script>


<strong>Embed code:</strong><br>
<textarea rows="3" cols="50"><iframe style='overflow: hidden; border: 0; width: 640px; height: 343px' src='http://site.com/cgi-bin/index.cgi?op=embed_video&id=80849&vid_type=movie' scrolling='no'></iframe></textarea>

<br><br>
<strong>Width:</strong><input type="text" size="5" value="640" onchange="updateEmbedSize('width',this.value)">
<strong>Height:</strong><input type="text" size="5" value="318" onchange="updateEmbedSize('height',this.value)">

thebeer
Posts: 47
Joined: Feb 01, 2010 9:41 am

#5 Postby thebeer » Mar 27, 2010 2:58 pm

thanks for the info komi

here is the correct code to anyone else who needs it:
however this does not work with 1.7 version.

Code: Select all

<TMPL_IF video_embed_code>
<div class="tabbertab">
<h2><TMPL_VAR lang_emded_code></h2><br>
<script type="text/javascript">
function $(elem){return document.getElementById(elem);}
function updateEmbedSize(changed,mov) {
var aspectratio=2.0125786163522;
 var width = parseInt($('embed_width').value);
 var height = parseInt($('embed_height').value);
 if (changed == 'width') {
 var new_height = Math.round(width / aspectratio) + 35;
 height = new_height;
 $('embed_height').value=new_height.toString();
 }
 if (changed == 'height'){
 var new_width = Math.round((height - 35) * aspectratio)
 width = new_width;
 $('embed_width').value = new_width.toString();
 }
 height=height+35;
 $('ic4-<TMPL_VAR file_id>').value = "<iframe style='overflow: hidden; border: 0; width: " + width.toString() + "px; height: " + height.toString() + "px;' src='<TMPL_VAR site_url>/cgi-bin/index.cgi?op=embed_video&id=80849&vid_width=" + width.toString() + "&vid_height=" + (height - 35).toString() + "&vid_type=movie" + "' scrolling='no'></iframe>";
} 
</script>
<textarea style="width:98%;" rows="3" onFocus="copy(this);" id="ic4-<TMPL_VAR file_id>"><iframe style='overflow: hidden; border: 0; width: 640px; height: 343px' src='<TMPL_VAR site_url>/cgi-bin/index.cgi?op=embed_video&id=80849&vid_type=movie' scrolling='no'></iframe></textarea>
<br>
Width: <input type="text" onchange="updateEmbedSize('width',this.value)" value="640" size="3" id="embed_width">   Height: <input type="text" onchange="updateEmbedSize('height',this.value)" value="350" size="3" id="embed_height">

<div id="c4-<TMPL_VAR file_id>" class="btndiv"><TMPL_VAR lang_copy_clipboard></div>
</div>
</TMPL_IF>