YoutubeのiFrameAPIでimport 文を使いたい

Question

前提・実現したいこと

YoutubeのiFrameAPIを使ってサイトを作っています。

import文を使って、videoIdは別ファイルに読み込ませてwebpackでまとめたいのですが

import文を書くと以下の関数が

function onYouTubeIframeAPIReady() {

が動かなくなります。

該当のソースコード

//iframe.js

import ytData from './data';

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 // 各プレーヤーの格納
var ytPlayer = [];
// 各動画情報
 
// 各プレーヤーの埋め込み
function onYouTubeIframeAPIReady() {
    for(var i = 0; i < ytData.length; i++) {
        ytPlayer[i] = new YT.Player(ytData[i]['area'], {
            videoId: ytData[i]['id'],
            playerVars: {
                rel: 0
            },
            events: {
                'onReady': onPlayerReady
            }
        });
    }
}
 
function onPlayerReady(e) {
    for (var i = 0; i < ytData.length; i++) {
        if(e.target.getIframe().id == ytData[i]['area']) {
            console.log(ytData[i]['area'] + 'のプレーヤー準備完了しました。');
        }
    };
}

// data.js

var ytData = [
    {
        id: 'hoge',
        area: 'player'
    }, {
        id: 'hoge',
        area: 'player01'
    }
];   

export {ytData};

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[unhappychoice]

動かなくなります。
とはどういった状況でしょうか、
- webpack したあとの成果物は生成されていますか？
- webpack のコンソールまたはブラウザで動かしている場合は devtool になにかエラーは出ていますか？

[kumin_43]

ありがとうございます。
わかりづらくて申し訳ありません。

「動かなくなります」というのは

iframe.jsにimport文を書いた時点で

function onYouTubeIframeAPIReady()

が機能しなくなる、ということです。

＊VS CODEを使用しているのですが、import文を書くとonYouTubeIframeAPIReady()の文字が薄くなり
　ます。

webpackはまだ使っていませんので、一旦無視していただいて大丈夫です。

Answer 1

以下の関数をグローバル関数にすることで解決しました

window.onYouTubeIframeAPIReady = function() {
    // 省略
}