CODEWITHSUNDEEP
htmlvideoiframe
predactor
predactor

Reputation: 1072

Play videos with iframe in html

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:

image when i load page

How can I play the video with iframe and not with the video tag?

Upvotes: 8

Views: 131837

Answers (7)

msupport
msupport

Reputation: 1

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.

Upvotes: 0

Tofnet
Tofnet

Reputation: 394

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>

Upvotes: 0

Naruto
Naruto

Reputation: 103

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

Upvotes: 0

Viktova
Viktova

Reputation: 612

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)

Upvotes: 5

Jhoedram
Jhoedram

Reputation: 361

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:

  1. Create a html-and in that html implement a video with the

  2. Then from the other page write the <iframe src = "yourwebcontentvideo.html" />

And that would be it.

Upvotes: 2

Danilkalmykov
Danilkalmykov

Reputation: 47

Just use the <video><source src="..." type="video/mp4"></video> tags.

Upvotes: 3

Bubble Hacker
Bubble Hacker

Reputation: 6723

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

Upvotes: 14

Related Questions