Miért nem működik ez a javascript?

Azt akartam megoldani, hogy ha érzékeli a script hogy telefonról (kis képernyőről) nézik, akkor egy div tartalma megváltozzon. Itt a script:

<script>

var filmecske = document.getElementById("video_player_box");

if (matchMedia('only screen and (max-width: 480px)').matches) {

filmecske.innerHTML = "<video controls controlsList='nodownload' class=film id='the_film'>\

<source src=' [link] type='video/mp4'>\

</video>"

}

</script>