Home/ Questions/Q 4329440
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T09:49:27+00:00

Can someone please tell me how to get two times #videoContainer on the same

  • 0

Can someone please tell me how to get two times #videoContainer on the same page:

<!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" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>My Videos</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
function loadVideo(playerUrl, autoplay) {
    swfobject.embedSWF(
        playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
        (autoplay?1:0)+'&version=3', 'player', '585', '355', '9.0.0', false, 
        false, {allowfullscreen: 'true'});

        /*Parse the facebook like button*/
        $('#like').html('<fb:like href="'+playerUrl+'" layout="button_count" show_faces="false" width="65" action="like" font="segoe ui" colorscheme="light" />')
        if (typeof FB  != "undefined"){
            FB.XFBML.parse(document.getElementById('like'))
        }
}

function showMyVideos(data) {
    var feed = data.feed;
    var entries = feed.entry || [];
    var html = ['<ul class="videos">'];
    for (var i = 0; i < entries.length; i++) {
        var entry = entries[i];
        var title = entry.title.$t.substr(0, 20);
        var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
        var playerUrl = entries[i].media$group.media$content[0].url;
        var videoId = playerUrl.substr(playerUrl.indexOf('v/')+2, 11);          
        playerUrl = "http://www.youtube.com/v/" + videoId;  
        html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
                  '<img src="', 
                  thumbnailUrl, '" width="94" height="58"/>', '</span></li>');
    }
    html.push('</ul>');
    document.getElementById('videos').innerHTML = html.join('');
    if (entries.length > 0) {
        loadVideo(entries[0].media$group.media$content[0].url, false);
    }
}

$(function(){
      $.ajax({
            type: "GET",
            url: "http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=today&alt=json-in-script&max-results=5&format=5",
            cache: false,
            dataType:'jsonp',
            success: function(data){
                showMyVideos(data);
          },
            error: function(XMLHttpRequest, textStatus, errorThrown, data){
                alert("Not able to fetch the data due to feed unavailability!!!");
            }
        });
})
</script>


<style>

body{
    background:#fff;
    color:#c0c0c0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:100%; 
    line-height:1.125em;
    }

#videoContainer {
    font-size:.75em;
    overflow:hidden;
    position:absolute;
      left:0px;
      top:0px;
      margin-left:40px;
      margin-top:5px;
    }

#playerContainer {

    }

#like {
    height: 15px;
    margin-top: 10px;
    text-align: right;

    }


object {

  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}


ul.videos {
    list-style: none;
    margin-bottom: 1em;
    margin-left: 0em;
    padding-left : 0em;

    }
    ul.videos li {
        cursor: pointer;
        display: inline;
        margin-bottom: 1em;
        padding-right: 28px;
    }


img {
 -moz-box-shadow: 0px 0px 0px #ccc;
  -webkit-box-shadow: 0px 0px 0px#ccc;
  box-shadow: 0px 0px 0px #ccc;
}

img:hover {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;

}


</style>

</head>
<body>
<div id="videoContainer">

    <div id="playerContainer">
        <div id="player"></div>

        <div id="like"></div>
        <div id="videos"></div>

    </div>
        </div>


</body>
</html>

I tried it myself and it worked exept for the large video player which only displayed one time.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, add another container:

    <div id="player"></div>
<div id="player2"></div>

    And load the flash into the proper container according to function argument:

    function loadVideo(playerUrl, autoplay, containerId) {
   if (typeof containerId == "undefined")
      containerId = "player";

   swfobject.embedSWF(
       playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
       (autoplay?1:0)+'&version=3', containerId, '585', '355', '9.0.0', false, 
       false, {allowfullscreen: 'true'});

   ...
}

    Now call the function like this to load the video in the second container:

    onclick="loadVideo(\'', playerUrl, '\', true, 'player2')"
    • 0