Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Auto re-size embedded video streams within DIVs

    I have a pretty simple application that displays four video streams in a quadrant. The user is able to double click each video to activate full screen mode, and then again to revert back to the quadrant. This all works great.

    The problem I am encountering is determining the proper placement/size of the embedded objects within my DIVs. Ideally I would like the videos to fully occupy each of the DIVs regardless of how the user may re-size their browser window.

    My CSS looks like this:

    Code:
    .tl {
        position: absolute;
        top: 0;
        left: 0;
        right: 50%;
        bottom: 50%;
        background: white;
    }
    .tr {
        position: absolute;
        top: 0;
        left: 50%;
        right: 0;
        bottom: 50%;
        background: white;
     }
    .bl {
        position: absolute;
        top: 50%;
        left: 0;
        right: 50%;
        bottom: 0;
        background: white;
    }
    .br {
        position: absolute;
        top: 50%;
        left: 50%;
        right: 0;
        bottom: 0;
        background: white;
    }
    HTML:

    Code:
    <html>
    <head>
        <LINK href="css/style.css" rel="stylesheet" type="text/css">
        <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script langauge="javascript" src="http://revolunet.github.com/VLCcontrols/src/jquery-vlc.js"></script>
    </head>
    <body>
    <div class='tr' id='vlc1'></div>
    <div class='tl' id='vlc2'></div>
    <div class='bl' id='vlc3'></div>
    <div class='br' id='vlc4'></div>
    </body>
    </html>
    Javascript:

    Code:
    function play(instance, uri) {
        VLCobject.getInstance(instance).play(uri);
    }
    
    var player = null;
    $(document).ready(function() {
        var mydiv = document.getElementById("tr");
        player = VLCobject.embedPlayer('vlc1', 400, 300, true);
        player.play("http://URL");
        player = VLCobject.embedPlayer('vlc2', 400, 300, true);
        player.play("http://URL");
        player = VLCobject.embedPlayer('vlc3', 400, 300, true);
        player.play("http://URL");
        player = VLCobject.embedPlayer('vlc4', 400, 300, true);
        player.play("http://URL");
    });
    I've created a jsfiddle of this here: http://jsfiddle.net/AD4Vp/

    I think that perhaps I need to dynamically alter the size of the embedded videos? I understand that I am defining video sizes here (400,300) but the videos still are all left oriented in each div and I am not sure how I can determine what the 'optimal' initial size should be.

    Any suggestions as to the best way to approach this would be appreciated.

    Thank you.

  • #2
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I finally came up with a solution and got rid of jquery-vlc.js

    I updated my HTML and wrapped the videos in another container:

    HTML:

    Code:
    <div class='tr'><div class="vlccontent" id='vlc1'></div></div>
    <div class='tl'><div class="vlccontent" id='vlc2'></div></div>
    <div class='bl'><div class="vlccontent" id='vlc3'></div></div>
    <div class='br'><div class="vlccontent" id='vlc4'></div></div>
    The CSS for this is:

    Code:
    .vlccontent {
       position: absolute;
       top: 0px;
       left: 0px;
       width: 100%;
       height: 100%;
    }
    In my javascript I then just used jquery to insert the embed statements:

    Code:
    $(document).ready(function() {
        $('#vlc1').html('<embed type="application/x-vlc-plugin" toolbar="false" width="100%" height="100%" id="vlc_vid1" target="http://URL"></embed>');
        $('#vlc2').html('<embed type="application/x-vlc-plugin" toolbar="false" width="100%" height="100%" id="vlc_vid2" target="http://URL"></embed>');
        $('#vlc3').html('<embed type="application/x-vlc-plugin" toolbar="false" width="100%" height="100%" id="vlc_vid3" target="http://URL"></embed>');
        $('#vlc4').html('<embed type="application/x-vlc-plugin" toolbar="false" width="100%" height="100%" id="vlc_vid4" target="http://URL"></embed>');
    });
    Works great now.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •