0

Ive got a problem. I want to make an video gallery, with an image thumbnail. When you click on the thumbnail, a popup should appear with the corresponding youtube video.

The unique youtube id I save in a MySQL DB. However, when i got my gallery, and click on different thumbnails, it always shows the same video. When i look in my source code, the correct Youtube id's are shown. I can't figure out what's going wrong.

Bootstrap 3 and Youtube in Modal

<?php
            $servername = "localhost";
            $username = "username";
            $password = "password";
            $dbname = "DB";

            // Make connection
            $conn = new mysqli($servername, $username, $password, $dbname);
            // Check connection
            if ($conn->connect_error) {
                die("Connectie mislukt: " . $conn->connect_error);
            } 

            $sql = "SELECT * FROM video ORDER BY id asc LIMIT 0,12";
            $result = $conn->query($sql);
            while($row = $result->fetch_assoc()) {
            //Get YT id from DB.
            $video = "".$row["video"]."";

            if ($result->num_rows > 0) {
                echo "
                <a href=\"#\" class=\"item-gallery-footer wrap-pic-w\" data-toggle=\"modal\" data-target=\"#modal-video-01\"><img src=\"../images/video/".$row["foto"]."\">
                <div class=\"modal fade\" id=\"modal-video-01\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
                <div class=\"modal-dialog\" role=\"document\" data-dismiss=\"modal\">
                    <div class=\"close-mo-video-01 trans-0-4\" data-dismiss=\"modal\" aria-label=\"Close\">&times;</div>

                    <div class=\"wrap-video-mo-01\">
                        <div class=\"w-full wrap-pic-w op-0-0\"><img src=\"images/icons/video-16-9.jpg\" alt=\"IMG\"></div>
                        <div class=\"video-mo-01\">
                            <iframe src=\"https://www.youtube.com/embed/$video?rel=0&amp;showinfo=0\" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div></a>

";  

            }
        }
        ?>
Vaporub
  • 1
  • 1
  • You have the same ids on your modals which is invalid html and is probably what causes your problem too – Dimitris Filippou Oct 31 '18 at 12:15
  • Unfortunately it is not. I use the same code static (for a video). The youtube url is static coded, and then its working.. – Vaporub Oct 31 '18 at 16:57
  • https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal/53139268?noredirect=1#comment93171758_53139268 – Vaporub Nov 04 '18 at 10:52

0 Answers0