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);

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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