Having trouble using iframes

Question

I am failing badly when it comes to using iframes and I need some help. I have never used an iframe before, this is my first time.

Here is a doucment on what I am trying to follow to produce an iframe with the galleria slider: http://galleria.io/docs/references/data/

What I have is a jwplayer and I want to access a video(s) using an iframe to retrieve the videos which are in the video.php page. If there is a single video, then simply retrieve the correct video from the video.php page but if there are multiple videos, then retrieve the correct multiple videos and display them in the galleria slider. But my question is how can I get the iframe to work in order to do this?

Below is the video.php page where it displays the jwplayer:

   <div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...

    <script type="text/javascript">


    jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
        file: "<?php echo 'VideoFiles/'.$v; ?>",
        width: 480,
        height: 270
    });

    <?php $i++; ?>

Below is the code where it checks if the video is a single or multiple, displays the galleria slider if multiple and this is where the iframe is placed:

if(count($arrVideoFile[$key]) == 1){
    foreach ($arrVideoFile[$key] as $v) { ?>

var data = [
    {

     iframe: 'video.php'

     }
];  


<?php
}
}else if(count($arrVideoFile[$key]) > 1){
?>

<style>
    #galleriavideo_<?php echo $key; ?>{ width: 500px; height: 300px; background: #000 }
</style>

 <div id="galleriavideo_<?php echo $key; ?>">
<?php
foreach ($arrVideoFile[$key] as $v) { ?>

<script type="text/javascript">

var data = [
    {

     iframe: 'video.php'

     }
];
</script>
</div>
<?php } ?>
</div>

         <script type="text/javascript">

            Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
            Galleria.run('#galleriavideo_<?php echo $key; ?>');

          </script>

<?php

        }
    }
        //end:procedure video

EDIT: video.php

<?php

$key = filter_input(INPUT_GET, "key", FILTER_SANITIZE_STRING);
$i = filter_input(INPUT_GET, "i", FILTER_SANITIZE_NUMBER_INT);
$v = filter_input(INPUT_GET, "v", FILTER_SANITIZE_STRING);

?>
<div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...

<script type="text/javascript">
jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
    file: "<?php echo 'VideoFiles/'.$v; ?>",
    width: 480,
    height: 270
});

</script>

</div>

assessment.php:

if(count($arrVideoFile[$key]) > 1){
?>

<style>
    #galleriavideo_<?php echo $key; ?>{ width: 500px; height: 300px; background: #000 }
</style>

 <div id="galleriavideo_<?php echo $key; ?>">
<?php
foreach ($arrVideoFile[$key] as $v) { ?>

<a href="video.php?key={$key}&i={$i}&v={$v}"><img class="iframe"></a>

<?php $i++; ?>
<?php } ?>
</div>

         <script type="text/javascript">

            Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
            Galleria.run('#galleriavideo_<?php echo $key; ?>');

          </script>

<?php

        }

Answer 1

Here is a short example on how to use Galleria with jwplayer. You can try to adapt it to your code then.

First, there is the video.php file which contains the jwplayer:

<div id="container"></div>
<script type="text/javascript" src="/path/to/jwplayer.js"></script>
<script type="text/javascript">
    jwplayer("container").setup({
        file: "http://content.bitsontherun.com/videos/3XnJSIm4-kNspJqnJ.mp4",
        image: "http://content.bitsontherun.com/thumbs/3XnJSIm4-640.jpg"
    });
</script>

Then, there is the gallery.php file, which contains the slider:

<div id="galleria" style="height:350px; width:550px;">
    <a href="/path/to/video.php"><img class="iframe"></a>
</div>

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/galleria.js"></script>
<script type="text/javascript">
    Galleria.loadTheme('/path/to/galleria.classic.min.js');
    Galleria.run('#galleria');
</script>

If you want to display multiple videos in the slider, you can imagine a solution where video.php takes a parameter and loads a video according to it, i.e. video.php?id=xx

Edit: to clarify a bit

Your video.phpfile should take some parameters:

$key = filter_input(INPUT_GET, "key", FILTER_SANITIZE_STRING);
$i = filter_input(INPUT_GET, "i", FILTER_SANITIZE_NUMBER_INT);
$v = filter_input(INPUT_GET, "v", FILTER_SANITIZE_STRING);

<div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...
<script type="text/javascript" src="/path/to/jwplayer.js"></script>
<script type="text/javascript">
jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
    file: "<?php echo 'VideoFiles/'.$v; ?>",
    width: 480,
    height: 270
});

And then in the gallery.php file:

<div id="galleria" style="height:350px; width:550px;">
    <a href="/path/to/video.php?key=xxx&i=xxx&v=xxx"><img class="iframe"></a>
    <a href="/path/to/video.php?key=xxx&i=xxx&v=xxx"><img class="iframe"></a>
    <a href="/path/to/video.php?key=xxx&i=xxx&v=xxx"><img class="iframe"></a>
    ...
</div>