Page does not show <iframe> with youtube vid

问题:

I am using <iframe> as shown below, to display videos from youtube in my page>

<iframe src="http://www.youtube.com/v/DNLh8p3aUzQ" disallowfullscreen=""></iframe>

It does work well in Chrome, IE, Edge, but in Mozilla Firefox the videos aren't shown at all and it tries to download the videos, like this:

What could be the issue here ?

Thanks.

回答1:

Notice that Mozilla does not support Adobe Flash anymore and so when the browser gets the "application/x-sockwave-flash" it automatically downloads it since it does not know what to do with it.
Instead you should you use the YouTube share option (Under the video choose "share" andthen choose "embed") which gives you the correct way to embed it into an "iframe" for all browsers (Uses HTML5).
In your case the right url to use in the "iframe" is https://www.youtube.com/embed/DNLh8p3aUzQ

回答2:

It want download after click on iframe or after site load? Maybe check Firefox addons...

回答3:

look at this fiddle, it also makes it responsive https://jsfiddle.net/x5q411jk/

/* Flexible iFrame */
 
.flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.flexible-container iframe,   
.flexible-container object,  
.flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="https://www.youtube.com/embed/DNLh8p3aUzQ" width="560px" height="315px" frameborder="0" style="border:0"></iframe>
</div>