Custom shortcode in widget forced to top of widget

A custom shortcode i made is being forced to the top of the widget outside of the widget container. Any ideas why? This is my code…

function nktmediaplayer_func($atts) {
 extract(shortcode_atts(array(
    'id' => rand(1, 900),
    'language' => 'en',
    'playlist' => 'no',
    'media' => '3381',
    'height' => '480',
    'width' => '640',
    'style' => 'single'
    ), $atts));
    ?>

    <div id="player_<?php echo $id; ?>" class="video_player"><a href="http://www.adobe.com/products/flashplayer/" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Get the Flash Player</a> to see this player.</div>

    <script type="text/javascript" src="https://kadampa.org/embed/apps/jwplayer.js"></script> 
    <script type="text/javascript"> 
        jwplayer("player_<?php echo $id; ?>").setup({
            flashplayer: "http://kadampa.org/embed/apps/player.swf",
            playlistfile: "http://kadampa.org/<?php echo $language; ?>/api/video/<?php if ( 'playlist' == 'yes' ) echo 'playlist/'; ?><?php echo $media; ?>/desc",
            height: "<?php echo $height; ?>",
            width: "<?php echo $width; ?>",
            config: "http://kadampa.org/embed/config/<?php echo $style; ?>.xml"
        });
    </script>

    <?php    
}
add_shortcode('nkt_mediaplayer', 'nktmediaplayer_func', 10);

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

For shortcodes you have to return the output for it to be written out where the shortcode appears.

Either turn your HTML into a PHP string rather than breaking out of the PHP tags or you can use PHPs output buffering methods like so:

ob_start();

?>

    <div id="player_<?php echo $id; ?>" class="video_player"><a href="http://www.adobe.com/products/flashplayer/" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Get the Flash Player</a> to see this player.</div>

    <script type="text/javascript" src="https://kadampa.org/embed/apps/jwplayer.js"></script> 
    <script type="text/javascript"> 
        jwplayer("player_<?php echo $id; ?>").setup({
            flashplayer: "http://kadampa.org/embed/apps/player.swf",
            playlistfile: "http://kadampa.org/<?php echo $language; ?>/api/video/<?php if ( 'playlist' == 'yes' ) echo 'playlist/'; ?><?php echo $media; ?>/desc",
            height: "<?php echo $height; ?>",
            width: "<?php echo $width; ?>",
            config: "http://kadampa.org/embed/config/<?php echo $style; ?>.xml"
        });
    </script>

<?php

$output = ob_get_contents();
ob_end_clean();

return $output; 

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0