CODEWITHSUNDEEP
phpyoutube-api
Binary Accepted
Binary Accepted

Reputation: 49

PHP Problem with foreach loop with YouTube API

I found and modified a snippet for displaying youtube videos.

I set it up behind BootStrap using Models to popup when clicked.

Problem I'm having is figuring out why the fourth item isn't showing the popup model.

If you want to see the problem in action you can click the fourth item listed in the bottom at: https://phattboiibamm.com/

<?php 
//Get videos from channel by YouTube Data API
$API_key    = 'SECRET'; //my API key
$channelID  = 'SECRET'; //my channel ID
$maxResults = 4;

$video_list = json_decode(file_get_contents('https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId='.$channelID.'&maxResults='.$maxResults.'&key='.$API_key.''));


$latest = $video_list->items[0]->id->videoId;
$thelist = $video_list->items;
?>

This is the loop

            <?php
foreach ($thelist as $item) {

    //Embed video
    if (isset($item->id->videoId)) {
        //echo '<div class="embed-responsive embed-responsive-21by9">
       //         <iframe class="embed-responsive-item" width="280" height="150" src="https://www.youtube.com/embed/'.$item->id->videoId.'" frameborder="0" allowfullscreen></iframe>
                //<h4>'. $item->snippet->title .'</h4>
       //     </div>';
       
       echo "\n \n <br><br> \n \n ";
       echo "\n \n <!-- Image --> \n \n";
       echo "\n \n <br><br> \n \n ";
       
           echo '<img src="'.$item->snippet->thumbnails->high->url.'" width="250px" height="250px" alt="..." class="img-thumbnail m-1" data-toggle="modal" data-target="#'.$item->id->videoId.'">';
       
       echo "\n \n <br><br> \n \n ";
       echo "\n \n <!-- Model --> \n \n";
       echo "\n \n <br><br> \n \n ";
       
        echo '<div class="modal fade bd-example-modal-lg" id="'.$item->id->videoId.'" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    
                    <center><h4>'. $item->snippet->title .'</h4></center>
                    <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                        <iframe class="embed-responsive-item p-1" src="https://www.youtube.com/embed/'.$item->id->videoId.'" frameborder="0" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>';
       
       
    } 

} ?>

Upvotes: 1

Views: 253

Answers (1)

u_mulder
u_mulder

Reputation: 54841

Problem here is that you have an id attribute, which starts with the number (in your markup it is 7):

<div class="modal fade bd-example-modal-lg" id="7hJv63L6Sco" ...

Some browsers (maybe even all) don't work with id values, starting with numbers. So, to avoid this you can prepend id with some string, e.g.:

echo '<img src="'.$item->snippet->thumbnails->high->url.'" width="250px" height="250px" alt="..." class="img-thumbnail m-1" data-toggle="modal" data-target="#video-'.$item->id->videoId.'">';
   
//  and here
echo '<div class="modal fade bd-example-modal-lg" id="video-'.$item->id->videoId.'" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

Note, that data-target attribute should be changed too.

Useful link (thanks @04FS) for using numeric and other non-regular symbols as attributes' values : https://mathiasbynens.be/notes/css-escapes

Upvotes: 2

Related Questions