youtube APIを使って検索ﾜｰﾄﾞでﾍﾟｰｼﾞに動画を埋め込んでみたのですが(javascript)､youtube API keyがｿｰｽにそのまま入っていて丸見えなので､ちょっと気になります｡…

ｿｰｽにそのまま書き込まないで､外部ﾌｧｲﾙ？にAPI KEYを書いておいて､そこを呼び出す？そのようなことはできるのでしょうか｡

どちらかというと､この質問の続きですよね｡

jQuery を使うなら､$.getJSON を使うことで､該当のﾍﾟｰｼﾞ以外のところから値を持ってくることができます｡

例えば､以下のような JSON 形式のﾌｧｲﾙを YouTube API を使う HTML と同じ階層の info.json というﾌｧｲﾙに書いておきます｡

{"apikey": "【APIｷｰ】"}

で､API ｷｰを使う側はこんな感じ｡

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
 var url = "info.json";
 $.getJSON(url, function(info) {
 var apikey = info.apikey; // info.json に書いてある API KEY
 var video_id = "WTLQQPBPL1U";
 var url = "https://www.googleapis.com/youtube/v3/videos?id=" + video_id + "&key=" + apikey + "&part=statistics";
 $.getJSON(url, function(data) {
 // viewCount を取り出し
 var count = data.items[0].statistics.viewCount;

 // HTML に出力
 $("#count").text(count);
 });
 });
});
</script>

<div id="count"></div>

外側の $.getJSON で､info.json を読み込んで､そこから API ｷｰを取得します｡
API ｷｰを取得した後は､前の回答と同じ処理です｡

いきなり見えちゃうという気持ち悪さは軽減できるのですが､ｿｰｽを見れば info.json に API ｷｰが書いてあるのはまる分かりですし､仮に暗号化したとしても､ﾌﾞﾗｳｻﾞの開発用機能を使って www.googleapis.com へｱｸｾｽしている URL を調べれば､API ｷｰはやっぱりばれてしまいます｡

他の人に API ｷｰを利用されないために､制限がかけられます｡

承認の認証情報を取得する | YouTube Data API (v3) | Google Developers の｢APIｷｰ｣の｢詳細はこちら｣
知っておきたい！YouTube APIの始め方 | D2Cｽﾏｲﾙの 4番目

HTTP ﾘﾌｧﾗｰを詐称する方法も無くはないのですが､もろに見えているよりはずいぶんﾏｼだと思います｡

追記です｡

動画がﾗﾝﾀﾞﾑで12個表示されてしまうので､これを1個だけ表示にしたいのですがｳｨｼﾞｪｯﾄｺｰﾄﾞは動画12個と決まっているので､それを1個にする方法としてはifremeの表示ｻｲｽﾞをうまく1個分ｻｲｽﾞにするとか？

iframe で周りを見せなくするのでも良いのなら､CSS で見えなくするのでも良いかな､とか思いました｡

こんな感じ｡

<style>
#trendtube-wrapper {
 display: none; /* 最初は見えなくしておく */
 width: 320px; /* 幅を指定してみた */
}
</style>

<!-- TrendTube のﾌﾞﾛｸﾞﾊﾟｰﾂを表示する領域 -->
<div id="trendtube-wrapper">
<!-- TrendTube のﾌﾞﾛｸﾞﾊﾟｰﾂ -->
<script src="https://trendtube.wdeco.jp/api/type2/?thumb=block&query=鎧" charset="utf-8" ></script>
</div>

<script>
window.onload = function() {
 // 12 個の動画を表示する領域
 var boxes = document.querySelectorAll("#trendtube-wrapper .youtube-box");

 // ﾗﾝﾀﾞﾑにひとつだけ表示するものを選ぶ
 var n_display = Math.floor(Math.random() * boxes.length);

 // それ以外は見えなくする
 Array.prototype.forEach.call(boxes, function(e, i) {
 if (i != n_display) {
 e.style.display = 'none';
 }
 });

 // 見えなくしておいた TrendTube のﾌﾞﾛｸﾞﾊﾟｰﾂを表示する領域を見えるようにする
 var wrapper = document.querySelector("#trendtube-wrapper");
 wrapper.style.display = 'initial';
};
</script>

12個表示される動画のうち､乱数でひとつだけ表示するものを決めて､それ以外は CSS で非表示にしています｡

｢iframe で周りを見せなくするのでも良いのなら｣と書いたのは､動画表示には直接に関係なさそうなﾘｸｴｽﾄをﾄﾞｶﾄﾞｶ投げるので､ちょっと重たいかなという気がするためです｡

あと､先ほどのｺｰﾄﾞを試している際に気がついたのですが､12個の動画のうち､ひとつでも動画のﾀｲﾄﾙにｼﾝｸﾞﾙｸｫｰﾄが入っていると､ｽｸﾘﾌﾟﾄｴﾗｰになってしまいます｡
例えば､ｷｰﾜｰﾄﾞを "soccer" のように英語で指定するとか｡
日本語なら大丈夫かというと､そうでもなくて "馬" とか "任天堂" とかだと結構な確率でｴﾗｰになりました｡