I want to play a video, but it is only downloading.
Here is my code:
<iframe src="videos/1.mp4" width="540" height="310"></iframe>
The Result when the page load is:
How can I play the video with iframe and not with the video tag?
7 Answers
Although some browsers might support this way of importing a video(Using an <iframe>) some browsers will act towards the video as a file and attempt to download it. The correct way to display a video is using the <video> tag:
<video width="540" height="310" controls>
<source src="videos/1.mp4" type="video/mp4">
</video>
See W3Schools tutorial here: video tag simple tutorial
answered Jun 6, 2016 at 19:03
-
well the original question was without the video tag :-) Commented Jan 6, 2021 at 17:31
Actually there's nothing wrong with your code! But the problem is with IDM (Internet Download Manager) as it hooks every link that your browser is requesting and finds whether the destination you're trying to access matches what is in IDM's extensions list, so the first thing would execute after the file being requested is IDM as it has higher priority than your browser and its anyway serving as a listener inside your browser.
you either have to exclude "localhost" from the hook or you have to remove the mp4 extension from IDM's extension list (which isnt efficient)
Just use the <video><source src="..." type="video/mp4"></video> tags.
An iframe tag is used to display another page, not used to play video. You can not play a video with that tag, whether or vimeo youtube or any other company lets you add video using a "iframe" is because they have previously configured some options on that page and have put a video. And that's why you can insert a video through an iframe.
Now if you want to force this, you should do the following:
Create a html-and in that html implement a video with the
Then from the other page write the
<iframe src = "yourwebcontentvideo.html" />
And that would be it.
An iframe is an HTML element that allows an external website or webpage or document(like word, pdf) or video to be embedded in an HTML document.
Here is an example for loading an Youtube video through iframe tag on your site
<iframe width="560" height="315" src="https://www.youtube.com/embed/2d2rfsm3ApU" allowfullscreen></iframe>
Output:
<pre>
<code>
https://jsfiddle.net/anjaneyulu15/og64djL0/7/
</code>
</pre>
Original content is taken from iframeinhtml.com
You can generate dynamic content like that:
let ifTest = document.getElementById('if-test');
let videoPath = 'https://file-examples.com/storage/fe63ea2155630fa7ba2b829/2017/04/file_example_MP4_480_1_5MG.mp4';
let videoHtml = '<html><body><video width="100%" autoplay="true" loop="true" muted="true" ><source src="' + videoPath + '" type="video/mp4" /></video></body></html>';
ifTest.setAttribute('srcdoc', videoHtml);
ifTest.setAttribute('style', 'width:264px; height:150px;')<iframe id="if-test" srcdoc=""></iframe>
Create a new file (video.php) with the <video src="/vids/video.mp4"> in it.
Then just use the new file in the iframe.
<iframe src="/vids/video.php" width="560" height="315"></iframe>
and that will work.
Ptag because I don't want a video element, and it won't work eitheriframeif you want.