Home/ Questions/Q 7602027
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T23:18:31+00:00

Is it possible to resize a running flash video from an external source without

  • 0

Is it possible to resize a running flash video from an external source without causing the video to refresh ? Sorry for the newbie question .

What i tried so far and failed.

HTML:

<html>
<head>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/streams.js" ></script>
<link href="style/stream.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <ul id="main">
        <li id="one" class="video-player">
        <!--AVENGERS TRAILER-->
        <iframe width="560" height="315" src="http://www.youtube.com/embed/NPoHPNeU9fc" frameborder="0" allowfullscreen></iframe>
        </li>
    </ul>
    <ul id="streams">
        <li id="two" class="video-player">
          2    
        </li>

        <li id="three" class="video-player">
        3
        </li>

        <li id="four" class="video-player">
        4
        </li>

        <li id="five" class="video-player">
        5
        </li>
    </ul>
</body>
</html>

CSS:

*{
    padding:0px;
    margin:0px;
}

#streams , #main{
    list-style:none;
    float:left;
    width: 100%;
}
.video-player{
    background-color:#666;
    float:left;
    height:390px;
    width:640px;
    margin:10px;
}

#main>li.video-player{
    zoom:100%;
}

#streams>li.video-player{
    zoom:50%;
}

JS script.( not finished , i stopped when i saw it causes the video to refresh) it just changes the zoom property of an div by moving it from a parent div to another one . 

$(document).ready(function() {
    $('.video-player').click(function() {

    var parentid = $(this).parent().attr("id");

    // Get the id of the div that was clicked
    var cliked = $(this).attr("id");
    var nextdiv = $(this).next().attr("id");
    var prevdiv = $(this).prev().attr("id");
    // Check the parent .
    if (parentid == "streams" ){
        $("#"+cliked).appendTo("#main");
        };
    if (parentid == "main" ){
        $("#"+cliked).appendTo("#streams");
        };
    });
    return false;
});

Any help is highly appreciated .

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since you are just embedding a video in a iFrame, there’s no problem to change the width and height properties of the iframe and therefore causing the embedded content (your youtube video) to be resized without any unwanted effects on the content itself.

    I wrote a little test for you, just to be sure:

    var sizeIncreaseFactor = 1.05;

function resizeIframe(){
    var myFrame = document.getElementById('myVideo');
    myFrame.width = parseInt(myFrame.width) * sizeIncreaseFactor;
    myFrame.height = parseInt(myFrame.height) * sizeIncreaseFactor;
}

<input type="button" onClick="resizeIframe();" value="Click to increase video size"></input>
<br />
<iframe id="myVideo" width="420" height="315" src="http://www.youtube.com/embed/_9bB7r0M9kg" frameborder="0" allowfullscreen></iframe>
    • 0