iframe to load video works fine locally but not working in server

Question

I have a resizable iframe which load a local video. When I was opening it direct from local file, the video loads perfectly and the resiza function works fine.

However, when I open the html using the local server, the video in the iframe dont load but it download automatically in the browser. Why does it happened?

<div id="resizable" class="ui-widget-content"><img class="arrow" src="Capture.png"><iframe height="235px" width="290px" class="iframe" src="The Best Glasses For Your Face Shape (1).mp4"></iframe></div>

<script>
  $(function() {
    $( "#resizable" ).resizable();
  });
  </script>

Answer 1

You need to use a <video> tag, to actually embed the file, rather than link to it: instead of <iframe>, use <iframe><video>.