Leaflet で Riot.js を使いユーチューブ　ローカルでエラーが発生します

Leafletのmap上でyoutubeを表示したく
ネットで探したコードですが、オンラインでは正常表示しますが
自分ＰＣ（ローカル）に於いて下記部分でエラーが発生します
どなたかご指導ください。

https://qiita.com/frogcat/items/38a86c55360e7ed6267e

javascript
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="UTF-8">
6  <title>leaflet + riot</title>
7  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
8  <link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.1/dist/leaflet.css" />
9 
10<script src="https://npmcdn.com/leaflet@1.0.0-rc.1/dist/leaflet.js"></script>
11<my-popup>
12    <!--name:名前-->
13    <h1>{opts.properties.name}</h1> 
14    <!--[撮影日]-->            
15    <span>{opts.properties["撮影日"]} 撮影</span>
16    <!--｛src｝:address-->
17    <iframe width="420" height="315" src="{src}" frameborder="0" allowfullscreen></iframe>
18    <!--iframe width="420" height="315" src="https://www.youtube.com/embed/GnwjtKiT8n0?rel=0" frameborder="0" allowfullscreen></iframe-->
19    <!--coordinates:latlng-->
20    <code>{opts.geometry.coordinates}</code>
21
22
23  <script>
24    
25    function getYoutubeEmbed(html) {
26      var div = document.createElement("div");
27      div.innerHTML = html;
28      var href = div.querySelector("a").href;
29      if (href.indexOf("https://youtu.be/") == 0)
30        return href.replace("https://youtu.be/", "https://www.youtube.com/embed/");
31      else if (href.indexOf("https://www.youtube.com/watch?v=") == 0)
32        return href.replace("https://www.youtube.com/watch?v=", "https://www.youtube.com/embed/");
33      return null;
34    }
35    /*******このコードでエラー発生****************/
36    this.src = getYoutubeEmbed(this.opts.properties["動画"]);
37    /*********************************************/
38
39  </script>
40
41  <style scoped>
42    :scope {display: block;}
43    h1 {font-size: 10pt;margin: 0;padding: 0;}
44  </style>
45</my-popup>
46
47  <script src="https://cdn.jsdelivr.net/riot/2.5/riot+compiler.min.js"></script>
48  <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.2.2/es6-promise.js"></script>
49  <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
50
51</head>
52
53<body>
54  <div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
55
56  <script> //src="script.js
57
58  var map = L.map("map").setView([35.362222, 138.731389], 5);
59  L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png", {
60      attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>淡色地図 (地理院タイル)</a>"
61  }).addTo(map);
62
63/*****fecth()メソッドに対象となるjsonのパスを指定し*******/
64  fetch("https://cyberjapandata.gsi.go.jp/xyz/20160414kumamoto_0416uav/2/3/1.geojson")
65    /****then()で繋げてjsonをオブジェクト形式に変換する****/
66    .then(function(response) {
67      return response.json();
68    })
69    /*****JSONデータを扱った処理など*******/
70    .then(function(geojson) {
71      console.log(geojson);
72      var layer = L.geoJson(geojson, {
73        pointToLayer: function(feature, latlng) {
74          return L.marker(latlng, {
75            title: feature.properties.name
76          }).bindPopup(function(marker) {
77            var div = document.createElement("div");
78            riot.mount(div, "my-popup", marker.feature);
79            return div;
80          }, {
81            maxWidth: 420,
82            minWidth: 420
83          });
84        }
85      });
86      map.addLayer(layer).fitBounds(layer.getBounds());
87    })
88
89    /****エラーを検出****/  
90    .catch(function() {
91      console.log(arguments);
92    });
93  
94</script>
95</body>
96
97</html>

行動規範の内容に同意します

回答1件

自己解決

回答が付かないので、一旦閉じます
その後ですが、自力で解決しましたので、下記に全コードアップしておきます。

javascript
1<!DOCTYPE html>
2<html>
3
4<head>
5  	<meta charset="UTF-8">
6  	<title>leaflet + riot</title>
7  	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
8  	<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.1/dist/leaflet.css" />
9
10  	<script src="https://npmcdn.com/leaflet@1.0.0-rc.1/dist/leaflet.js"></script>
11  	<script src="https://cdn.jsdelivr.net/npm/riot@3.13/riot+compiler.min.js"></script>
12  	<!--script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script-->
13
14    <style type="text/css">
15    /*   id:#  class:. */       
16    * {padding: 0;margin: 0;}
17    html, body, #map {
18        height: 100%;
19        font: 11pt "Meiryo UI","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;}
20    </style>
21</head>
22
23<body>
24  	<!--MAP-->
25  	<div id="map"></div>
26  	<!--定義タグ-->
27  	<mytag></mytag>
28  
29  	<!--myboxタグをRiotで定義-->
30  	<script type="riot/tag">
31  	<mytag>
32  	
33    <style scoped> /* ローカルスタイル */
34      :scope {
35        display: block;
36        background-color: #fff;
37        font-size: 1.0rem;
38        line-height: 1.0em;
39      }
40      p {line-height: 0.3em;} 
41    </style>
42
43    <!--　mytagの内容 -->
44    <iframe width="400" height="230" src="{src}" frameborder="0" allowfullscreen></iframe>
45    <p>名称:  {opts.properties.name} </p>
46    <p>撮影日:{opts.properties["撮影日"]}</p>
47    <p>位置:  {opts.geometry.coordinates}</p>
48
49	<!--GetEmbed_url呼び出し-->
50    this.src = GetEmbed_url(opts.properties.iframe);
51  	</mytag>
52  	</script>
53
54	<script type="text/javascript">
55  	function GetEmbed_url(tmp){
56    	//console.log("");
57    	//alert (""); 
58    	//  "iframe" : "<iframe width=\"400\" height=\"225\" src=\"https://www.youtube.com/embed/GnwjtKiT8n0?rel=0\" frameborder=\"0\" allowfullscreen></iframe>"
59    	var result = [];
60    	tmp = tmp.replace(/　/g,' ');
61    	var result = tmp.split(' ');
62    	tmp = result[3];
63    	tmp = tmp.replace('src="', "");
64    	tmp = tmp.replace(/"/g, "");
65   
66    	/**********/
67    	tmp = tmp.replace("https://youtu.be/", "https://www.youtube.com/embed/");
68    	return tmp.replace("https://www.youtube.com/watch?v=", "https://www.youtube.com/embed/");
69    	/***************/
70  	}
71	</script>
72
73  	<script> //src="script.js
74  	var map = L.map("map").setView([35.362222, 138.731389], 5);
75  	L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png", {
76      	attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>淡色地図 (地理院タイル)</a>"
77  	}).addTo(map);
78
79	/*****fecth()メソッドに対象となるjsonのパスを指定し*******/
80  	fetch("https://cyberjapandata.gsi.go.jp/xyz/20160414kumamoto_0416uav/2/3/1.geojson")
81    	/****then()で繋げてjsonをオブジェクト形式に変換する****/
82    	.then(function(response) {
83      		return response.json();
84    	})
85    	/*****JSONデータを扱った処理など*******/
86    	.then(function(geojson) {
87      		//console.log(geojson);
88      		var layer = L.geoJson(geojson, {
89        	pointToLayer: function(feature, latlng) {
90          		return L.marker(latlng, {
91            		title: feature.properties.name
92        
93          		}).bindPopup(function(marker) {
94            		var div = document.createElement("div");
95            		riot.mount(div, "mytag", marker.feature);
96            		return div;
97          		}, {
98           			 maxWidth: 400,
99           			 minWidth: 400
100          		});
101        	}
102      	});
103      	map.addLayer(layer).fitBounds(layer.getBounds());
104    })
105    /****エラーを検出****/  
106    .catch(function() {
107      console.log(arguments);
108    });
109	</script>
110</body>
111
112</html>