How to force a html5 video to load fully?

Question

I have a few html5 videos on a page. When I first enter the page, they load correctly - I can see the correct frame size, play the video etc. etc. After going to another page and coming back to the video page the frames are not high enough and the video doesn't play, doesn't go fullscreen etc.

In my opinion it's something with video loading. I tried using onloadeddata without success (I might have used it wrong though, newbie here).

Is there any way the video can be forced to load? Like a loop checking if the videos are loaded, if not - loading them?

UPDATE: Here's the code.

var content = '';
    var index;
    $.post('api/getVideo.php', {id: id}, function(data) {
    //console.log(data);

        for (index = 0; index < data.length; index++) {
            content = content + '<div class="col-md-6 video-col"> <button id="play" class="full-play-button"><i class="fa fa-play"></i></button>' +
                    '<video id="video1" class="video-small"> <source src="'+data[index]["Path"] + '"type="video/'+data[index]["Typ"]+'" class="video-file"> </video><h3 class="video-title">'+
                    data[index]["Tytul"]+'</h3></div>';
        }
    }, "json");

Answer 1

You might have a typo in your source tag. Try changing '"type="video/' to '"type=video/"'. Modern browsers don't require the type attribute, anymore, so try removing '"type="video/'+data[index]["Typ"]+' completely. I don't have enough info to test your code, but it looks like a syntax error.