javascript - 信息窗口中的视频不起作用

Question

我有一张带有标记和附加信息窗口的地图。我想在某些信息窗口中播放 youtube 视频（基于 markerData 数组中的值），例如：http ://www.henrysenior.co.uk/ICC/boris_again/

我查看了这个解决方案：Google Map Info Window 中的 YouTube 视频，但在我的代码中，它似乎不适用于任何浏览器。“测试”这个词也出现在标题为视频的标签中，这是错误的......我在这里做错了什么？

var infoBubble;
        var arrMarkers = [];            
        var markerData = [
                ['burger1', 52.308584, 4.767637, 1, 'yellow', 'info'],
                ['burger2', 52.308656, 4.76517, 1, 'yellow', 'info'],
                ['burger3', 52.308656, 4.72517, 1, 'yellow', 'info'],
                ['observant1', 52.309686, 4.762734, 2, 'red', 'info'],
                ['observant2', 52.309463, 4.771693, 2, 'red', 'info'],
                ['observant3', 52.309963, 4.771693, 2, 'red', 'info'],
                ['camera1', 52.308656, 4.76517, 3, 'camera2', 'video'],
                ['camera2', 52.30845238478713,4.76582407951355, 3, 'camera2', 'video'],
                ['camera3', 52.30868197442641,4.768838882446289, 3, 'camera2', 'video'],
                ['camera4', 52.307501215025695,4.769954681396484, 3, 'camera2', 'video'],
                ['camera5', 52.30950848726883,4.773516654968262, 3, 'camera2', 'video'],
                ['camera6', 52.309744630960914,4.762208461761475, 3, 'camera2', 'video'],
            ];

        //start this script at load         
        function initialize()
        {

        //http://www.geocodezip.com/v3_SO_infoBubbleTabbedContent.html
            var mapProp = { //set map properties
                    center:new google.maps.LatLng(52.309213,4.762316),
                    zoom:16,
                    mapTypeId:google.maps.MapTypeId.HYBRID
                    };

            //create map variable with properties       
            var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
for (i = 0; i < markerData.length; i++) {
                var pos = new google.maps.LatLng(markerData[i][1], markerData[i][2]);
                var title = markerData[i][0];
                var category = markerData[i][3];
                var new_marker = addMarker(pos, title, category);
                arrMarkers.push(new_marker);
                new_marker.setVisible(false);
            }


            function addMarker (pos, title, category) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: pos,
                    icon: "mapIcons/marker_"+markerData[i][4]+".png",
                    category: category,

                });  

                infoBubble = new InfoBubble({
                    maxWidth: 300,
                    borderRadius: 10,
                    borderWidth: 1,
                    borderColor: '#2c2c2c',
                    shadowStyle: 1
                });

                var infoWindow = new google.maps.InfoWindow; 
                var info = "<b>" + 'test' + "</b>"  ;  //html inside InfoWindow 
                //var video = "<div>" + '<iframe width="100" height="75" src=https://www.youtube.com/watch?v=4gMH0V4L4A4>' + "</iframe>" + "</div>";  //html inside InfoWindow
                var video = '<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/UmFjNiiVk9w?rel=0" frameborder="0"></iframe>';

                bindInfoWindow(marker, map, infoBubble, info, video);

                if (markerData[i][5] == 'info') {
                    infoBubble.addTab('Info', info);
                };
                if (markerData[i][5] == 'video') {
                    infoBubble.addTab('Video', video);
                };
return marker;
            }
//define click action for id 'open'
            google.maps.event.addDomListener(document.getElementById('open'),'click', function() {
                                infoBubble.open();
                                });

                //define click action for id 'closed'               
                google.maps.event.addDomListener(document.getElementById('close'),'click', function() {
                                infoBubble.close();
                                });

        }//end of initialize

            function bindInfoWindow(marker, map, infoBubble, html) { 
                    google.maps.event.addListener(marker, 'click', function() { 
                        infoBubble.setContent(html); 
                        infoBubble.open(map, marker);
                    }); 
            } 

            function addTab() {
                var title = document.getElementById('tab-title').value;
                var content = document.getElementById('tab-content').value;

                if (title != '' && content != '') {
                    infoBubble.addTab(title, content);
                }
            }

            // == shows all markers of a particular category, and ensures the checkbox is checked ==
            function show(category) {
                for (var i=0; i<arrMarkers.length; i++) {
                    if (arrMarkers[i].category == category) {
                        arrMarkers[i].setVisible(true);
                    }
                }
                // == check the checkbox ==
                document.getElementById("cat"+category).checked = true;
            }

            // == hides all markers of a particular category, and ensures the checkbox is cleared ==
            function hide(category) {
                for (var i=0; i<arrMarkers.length; i++) {
                    if (arrMarkers[i].category == category) {
                        arrMarkers[i].setVisible(false);
                    }
                }
                // == clear the checkbox ==
                document.getElementById("cat"+category).checked = false;
                // == close the info window, in case its open on a marker that we just hid
                infoBubble.close(map, marker);
            }

            // == a checkbox has been clicked ==
            function boxclick(box,category) {
                if (box.checked) {
                    show(category);
                }
                else {
                    hide(category);
                }
                }