CODEWITHSUNDEEP
javascriptiframevideo
Austin Jones
Austin Jones

Reputation: 709

How can I display video content from another site

Ok so I want to have lots of videos to choose from on my site, all of which are coming from archive.org. I originally thought maybe an iframe and when the user clicks on a video title the iframes source changes to the selected video. Just wondering is there a better way? Any recommendations and advice is welcome. archive.org's iframe with playlist that I tried.

  <script>
    jwplayer("playa").setup({
        "playlist": [
            { duration:5, 
              title:"camels",
              image:"https://archive.org/download/camels/format=Thumbnail", 
              sources:[ 
                  {file:"https://archive.org/download/camels/camels.mp4"}, 
                  {file:"https://archive.org/download/camels/camels.ogv"} ] 
            },
            { duration:115,
              title:"commute",
              image:"https://archive.org/download/commute/format=Thumbnail", 
              sources:[ 
                  {file:"https://archive.org/download/commute/commute.mp4"}, 
                  {file:"https://archive.org/download/commute/commute.ogv"} ] 
            },
            { duration:5717, 
              title:"night of the living dead",
              image:"https://archive.org/download/night_of_the_living_dead/format=Thumbnail", 
              sources:[ 
                  {file:"https://archive.org/download/night_of_the_living_dead/night_of_the_living_dead_512kb.mp4"}, 
                  {file:"https://archive.org/download/night_of_the_living_dead/night_of_the_living_dead.ogv"} ]
            }
        ],
        "startparam":"start",
        "repeat":"list",
        "width":714,
        // adjust these 2 lines if you'd like to omit/resize playlist, etc:
        listbar:{position:"bottom",size:100,layout:"basic"},
        "height":360,
    });
  </script></div>
<div id="playa"> </div>

but this isn't exactly what I want. Sorry its very broad I'm just not sure how to attempt this.

Upvotes: 0

Views: 92

Answers (1)

Mi-Creativity
Mi-Creativity

Reputation: 9654

As in this JSFiddle, i am using the value of the attribute href of each link <a> to inject it as a src value in the iframe element

JS:

$('.links').on('click', function(evt){
    evt.preventDefault();
    var vidSrc = $(this).attr('href');
    $('iframe').attr('src', vidSrc);
});

HTML:

<div id="titles">
    <a class="links" href="https://archive.org/embed/FinalFantasy2_356">Final Fantasy 2</a>
    <a class="links" href="https://archive.org/embed/MortalKombatSM_14337">Mortal Kombat SM</a>
    <a class="links" href="https://archive.org/embed/Quake4_20954">Quake4</a>
</div>
<iframe src="" width="400" height="300" frameborder="0"></iframe>

Upvotes: 1

Related Questions