Collecting title from youtube using api give strange behavior in jekyll

Question

I used following code to get youtube title in my jekyll blog.

<script type="text/javascript">
    function getyoutubetitle(videoID) {
        $.getJSON('https://www.googleapis.com/youtube/v3/videos?id='+videoID+'&key=AIzaSyDfqskjJZVzNMKVs1c7dXvlDC2rpjrB60&part=snippet&callback=?',function(data){
            if (typeof(data.items[0]) != "undefined") {
                document.write(data.items[0].snippet.title);
            } else {
                console.log('video not exists');
            }
        });
    }
</script>

When using <script>getyoutubetitle("iClTTtecJhs");</script> I get page reloaded to give only the title of video and all other content of blog gone.

http://songs.justinechacko.in/malayalam/2018/02/01/file5.html

Answer 1

Your bug is that you're just writing to the page. You need to rewrite the specific HTML node of wherever you want to display the title.

For example, if you want to change the text of a header with the id videoTitle01, then you would do:

<script type="text/javascript">
    function getyoutubetitle(nodeID, videoID) {
        let node = '#' + nodeID;
        let apiKey = 'AIzaSyDfqskjJZVzNMKVs1c7dXvlDC2rpjrB60';
        let url = 'https://www.googleapis.com/youtube/v3/videos?id=' + videoID + '&part=snippet&key=' + apiKey;
        $.getJSON(url, function(data){
            if (data && data.items && data.items[0]) {
                $(node).text(data.items[0].snippet.title);
            } else {
                console.log('video not exists');
            }
        });
    }
</script>

...

<script>
    getyoutubetitle('videoTitle01','iClTTtecJhs');
</script>
<h1 id="videoTitle01"><h1>