The code below is the main part of a function in my functions.php which returns a div and script which ultimately output a youtube API iframe to the template where the code had been called from. At the moment it's working fine; however I would like to enqueue the javascript, or at least move it out of my PHP code. I tired moving it to my main JavaScript file ( which is enqueued ) but it doesn't work when I move it there. Surely there's a better way ( or WordPress way ) of doing this?

$return = '
    
    <div id="' . $postid . 'player"></div>
    
    <script> var tag = document.createElement("script"); tag.src = "http://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player("'. $postid .'player", {
            height: "315",
            width: "560",
            videoId: "'. $videoID .'",
        });
    }
    </script>

    ';

return $return;

The code below is the main part of a function in my functions.php which returns a div and script which ultimately output a youtube API iframe to the template where the code had been called from. At the moment it's working fine; however I would like to enqueue the javascript, or at least move it out of my PHP code. I tired moving it to my main JavaScript file ( which is enqueued in the footer ) but it doesn't work when I move it there. Edit: I had hardcoded the vars to avoid having to use wp_localize_script so as to out of the picture.

Surely there's a better way ( or WordPress way ) of doing this?

$return = '
    
    <div id="' . $postid . 'player"></div>
    
    <script> var tag = document.createElement("script"); tag.src = "http://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player("'. $postid .'player", {
            height: "315",
            width: "560",
            videoId: "'. $videoID .'",
        });
    }
    </script>

    ';

return $return;