使用 YouTube API 的 foreach 循环的 PHP 问题

Question

我找到并修改了一个用于显示 youtube 视频的 sn-p。

我在 BootStrap 后面设置它，使用模型在点击时弹出。

我遇到的问题是弄清楚为什么第四个项目没有显示弹出模型。

如果您想查看问题的实际效果，可以单击底部列出的第四项：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;
?>

这是循环

            <?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>';
       
       
    } 

} ?>

Answer 1

这里的问题是您有一个 id 属性，它以 数字 开头（在您的标记中是 7）：

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

某些浏览器（甚至所有浏览器）不支持以数字开头的 id 值。因此，为避免这种情况，您可以在 id 前面加上一些字符串，例如：

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">
     

注意，data-target 属性也应该更改。

使用数字和其他非常规符号作为属性值的有用链接（感谢 @04FS）：https://mathiasbynens.be/notes/css-escapes