Embedded YouTube video does not show in Firefox, only in Chrome - iframe

I'm trying to embed a YouTube video:
<iframe width="444" height="250" src="https://www.youtube.com/embed/lN_MSyrq6-U?rel=0" ></iframe>
It works on Chrome; why doesn't it work on Firefox?
I've double-checked that the video is working in the respective region, deleted the allowfullscreen stuff, and checked w3schools for any iframe-related blocking stuff in Firefox.

After lot of help and asked a senior programer to help me .
the answer was the internet connection and/or windows cluttered it happened on
img too. ( they didnt load and the browser didnt said anything)
so it did load but ...

Related

Nextjs Image component not rendering images in Safari

Setup:
nextjs v12.1
safari v13.1.2
node v14.19 (can adjust with nvm and have tried a few)
The problem is simple, but i cant figure out a solution.
I have multiple <Image /> components in my nextjs project, and they render and work perfectly in Chrome, Firefox, and Brave (havent tried IE)
But safari won't render them. It's weird because at some point, I was making some changes, nothing was helping, I reverted the changes and it rendered the images! i was wondering what i did! I naviated the site and came back to the main page with the images and once more they were not rendering.
Basic usage of the Image component looks like this
<Image
src={'http://walldiskpaper.com/wp-content/uploads/2015/12/Waves-Abstract-Wallpaper.jpg'}
height={240} width={500}
layout={"responsive"}
/>
Again it works fine on firefox and chrome. Here are some screenshots of what i get on sources and network tab of safari
The sources tab shows that safari is unable to load any of the images... i dont know if it has to do with the base64. But I have seen them rendered at some point before i just dont know what is going on and i cant recreate it.
All this is in localhost by the way, i have not tested it online since i have yet to deploy.
Also by the way, this works fine on safari mobile! Im only having the issue in safari desktop
Hey i was also looking for same issue found something
installing package next#canary solve it

Spotify embed iframe not loading in IE11

I am using iframe tag and adding Spotify playlist url in src, see the example below:
<iframe class="myspotify-iframe" src="https://open.spotify.com/embed/playlist/3p5lcgvL0wxDeu32u3prL1" title="Spotify playlist" frameborder="0" allowtransparency="true" allow="encrypted-media">
</iframe>
above code is working fine in chrome, firefox & safari. But the playlist is not loading in IE11.
Any suggestion how this issue can be fixed ?
That website may no longer be compatible with IE11.
Don't make your websites compatible with IE11, or else you won't be able to use recent web standards without a lot of hacks. IE11 was released in 2013, 7 years before 2020.
I try to check the Spotify official docs to check the browser support.
I come to know by visiting this link that Spotify web player supported by Chrome, Firefox, Edge, Opera, and Safari browser.
So it looks like the IE browser is not supported and this is the reason that your playlist is not loading in the IE browser.
The issue is not related to an iframe. If you directly try to open the page in the IE browser then you can notice that it will show an error in the console.
I suggest trying to use the new MS Edge browser can help you to avoid the issue.

add video in website

If i use this code i don't see anything in firefox but well in chrome and explorer.
Anyone a idea to resolve this?
<embed id='embed1' runat="server" name='mediaPlayer' type='application/x-mplayer2'
pluginspage='http://microsoft.com/windows/mediaplayer/en/download/' displaysize='4'
autosize='-1' bgcolor='darkblue' showcontrols='true' showtracker='-1' showdisplay='0'
showstatusbar='-1' videoborder3d='-1' width='500' height='405' designtimesp='5311'
loop='false' src="movie.mp4" />
Try this: type="application/x-ms-wmp"
this supports .wmv, .wma, etc. (all windows formats)
and .mp4 is controversial due to copyright issue..
Note: Yes you need to install plug-in in browser.
Try this:
Media Player not working in firefox
Also:
In order to make Firefox able to render Media Player content, you need Windows Media Plugin in Firefox:
Download the Windows Media Player Firefox Plugin(http://port25.technet.com/pages/windows-media-player-firefox-plugin-download.aspx)

Youtube iframe embedded video not working (black screen)

On Diveboard, we made a nice hack of photoswipe to support videos
Everything went well until I discovered Firefox 11 and 12 beta are not playing the youtube videos embedded any more... it seems they are loaded, we can hear sound ad pufff no images... so it's youtube radio instead
you can see an example here : Video example page
And i've been scratching my head over and over on that one but I'm clueless :( :(
EDIT : Apparently it's an issue ONLY ON OSX!!! which makes me even more clueless...
Any hint would be apreciated
the iframe code is pretty straightforward:
<iframe width='#{width}' height='#{height}' src='http://www.youtube.com/embed/#{matchdata}?wmode=opaque&autoplay=1' frameborder='0' allowfullscreen></iframe>
What CSS styling are you using on your iframe? http://argylesocial.com used border-radius on youtube html5 iframes, and removing those style declarations resolved the problem.
I had to remove both -moz-border-radius and border-radius the get video to properly display. Works like a charm now!
It's actually a FF bug which is now fixed on mozilla 12 /13/14
http://ksso.net/~alex/ff_bug/moz-transform.html
I was getting the same issue on my website blog I am developing, I added height for the iframe as Firefox was not grabbing the height from the height tag in iframe, the solution is either add the height using style tag, but if its a responsive website use the media css for the iframe tags height. The example might explain it better.
If using a fixed height for the iframe then try adding style tag to the iframe as in
style="height:374px"
If responsive site the add the iframe to the media query in css - eg:
#media screen and (min-width: 100px) and (max-width:768px) {
.video iframe {height:200px}
}
and so on.
It worked for me, I hope it will helps others as well.
Thanks!

How to stop autoplay of video using iframe tag on Safari browser

i am embedding a video using Quick time in website and it starts to play automatically upon loading page.
Here is the code embed video.
<iframe SRC="${signedVideoURL}&autoStart=false" TYPE="image/xmacpaint"PLUGINSPAGE="https://www.apple.com/quicktime/download"QTSRC="${signedvideoURL}&autoStart=false" WIDTH="480" HEIGHT="297" AUTOPLAY="false" CONTROLLER="true" SCALE="ToFit"> </iframe>
Browser - Safari 5.1.1
I have also tried passing parameter autoplay=0, that didnot work either.
Can any one suggest how to stop this autoplay?
thanks
I'm not 100% sure of this but try it anyway (if its not the true answer, it shouldn't be far from it): put the argument autoplay=false in the src String of the iframe youtube video tag. Append it as usual with the & character.
Hope this helps
Add &autoplay=0 to your url

Resources