如何将JSON调用中的特定Youtube视频ID附加到IFrame中

Question

我正在为路易斯维尔的一个酒吧和餐馆项目创建一个睦邻地图。单击标记时，我需要让iFrame将相关视频填充到每个位置。我使用Youtube Data API根据地理位置检索视频ID，在我的控制台中，信息检索正在正确进行。我遇到的问题是将视频ID"推送"到index.html文件中的IFrame中。我尝试了几种不同的方法，从只将url字符串与连接的url相加，到尝试将整个IFrame对象附加到div中，但都不起作用。IFrame在那里，可以使用静态视频URL，但到目前为止，我无法根据用户活动（单击标记）获得动态更新。

这是Fiddle（该地图没有显示在JSFiddle上，但在Chrome btw中显示）。以下是我的javascript文件中有问题的部分的片段。

http://jsfiddle.net/smith1jason/mp5czfj9/

                var ytRequestTimeout = setTimeout(function () {
                console.log("failed to get Youtube resources");
            }, 10000);
            google.maps.event.addListener(marker, "click", function () {
                var yt_url = 'https://www.googleapis.com/youtube/v3/search?part=id&q=' + this.title + '+louisville&maxResults=1&callback=?&key=AIzaSyActmR_LWyXc0Y9CxHucYh-C73C09Om318';
                //make some room for youtube ajax call and supporting code here.
                $.getJSON(yt_url, function (response) {
                    console.log(response);
                    var title = response.items[0].id.videoId;
                    var playerUrl = 'src="https://www.youtube.com/embed/' + title + '"';
                    $player.append(playerUrl);
                    //var contentString = '<iframe width="320" height="200" src="//www.youtube.com/embed/'+title+'" frameborder="0" allowfullscreen></iframe>';
                    //var ytWindow = new google.maps.InfoWindow({
                    //content: contentString
                    //})
                    //ytWindow.open(map, marker);
                }

如有任何帮助，我们将不胜感激。我在Stack Overflow上搜索了很多youtube和谷歌地图api的问题，并收到了很多与这个问题无关的帮助。

Answer 1

终于想通了！

https://developers.google.com/maps/documentation/javascript/infowindows

它位于contentString中url的串联中，如Google Developers infoWindow文档中所示！

哈利路亚！