You're missing the slash at the start of the file URL, and you don't need to pass the MEDIA_ROOT into the context, use the {{ STATIC_URL }} template variable that you set in your settings file.

You're missing the slash at the start of the file URL, and you don't need to pass the MEDIA_ROOT into the context, use the {{ STATIC_URL }} template variable that you set in your settings file.

To clarify from the comments below, your MEDIA_ROOT setting is where django will store media files (user uploaded). The STATIC_ROOT is where django will look for static files (your js/css/images etc).

The STATIC_URL and MEDIA_URL settings are used in the template. They will be set to something like STATIC_URL = "/static/" and MEDIA_URL = "/media/" and they are passed to the template by django so when you do:

<img src="{{ STATIC_URL }}sample.jpg" /> 

or

<source src="{{ MEDIA_URL }}sample.mp4" type="video/mp4"></source> 

it replaces {{ STATIC_URL}} with "/static/" so you end up with "/static/sample.jpg" as the src url which django uses to fetch your file from the STATIC_ROOT.