In my web app I have to embedd youtube videos, for that I am using iframe. it works properly in chrome in html5 player. but when I am trying in mozilla firefox the video plays in flash player. how do I force mozilla to open the video in html player. I'm using mozilla version 36. please help me.
code used ::
<iframe type="text/html" width="100%" frameborder="0" allowfullscreen height="315" src="http://www.youtube.com/videoLink">
You are using an outdated browser ! please upgrade
</iframe>
Youtube's JS picks the version it thinks is right for you. The decision is made based on various factors, one that might be relevant is that although Firefox supports the VIDEO element it does not (yet) support the so-called Media Source Extension functionality. I have no idea if that's why YouTube chooses to use Flash rather than a VIDEO element, but it may be one of the factors.
Related
I am creating a single page website on squarespace and I added a background video using Iframe and grabbing src from vimeo. I have researched and learned that safari does't play videos if they are not muted, so I attempted to mute and added other suggestions like inline but still the video won't play. I have also noticed though that on my friends Iphone 10 it worked, and on someone else's Iphone 10 it didn't? I made sure both had low power mode off so I am not sure if it's my code or if it could be possible settings differences they both have? Here is the Iframe code. Also here is the squarespace website, password is david. (if you open this on mobile ignore the big font I haven't adjusted size on that yet). Any potential leads or tips would greatly help! I have been going in circles all weekend trying to get to the bottom of this.
<iframe id="v0" src="https://player.vimeo.com/video/318621793?background=1&autoplay=1&loop=1&byline=0&title=0&playsinline=0&muted=1" frameborder="0" webkitallowfullscreen playsinline autoplay mozallowfullscreen allowfullscreen muted >
</iframe>
You may need to include most Video.type like mp4, MPEG-4,etc..
For all platform
I have the following iframe:
<iframe src="http://www.youtube.com/embed/{{ item.getFieldCollectionItem().field_youtube.value }}?playsinline=0&rel=0&showinfo=0&controls=2&modestbranding=1&autohide=1" frameborder="0" width="300" height="169"></iframe>
however the the buttons generated from the API don't have text inside making them inaccessible. The accessibility report I have it mentiones the following:
"Unlabelled 2 Button"
I assume referring to the "play" and "pause" buttons.
Is there a way to make these more accessible by having a descriptive text inside?
Instead of fiddling with what YouTube gives us, I would recommend using a third-party video player that supports YouTube videos:
Able Player is available under the MIT licence. (Source code on GitHub.)
Plyr supports YouTube and Vimeo videos. The source code on GitHub is available under the MIT licence.
Video.js also supports YouTube videos if you add its YouTube plug-in.
There are other video players that devote attention to accessibility, but not all of them support YouTube videos.
I have written a small application to embed Vimeo videos and everything is working just fine, except expand video option in Internet Explorer.
Info: I am getting my video data (including the embed code) from vimeo api.
I have googled a bit, and found many cases where people where having problems with the embed code (not playing, missing options, etc). But not a similar case and not a solution.
Everything is working just fine in Chrome.
For IE I have tried/checked:
• All over Https
• Disabling hardware acceleration (this got the HD and Vimeo button to work)
• I frame has allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""
• HTML5 video handling (some people reported IE had some problems regarding HTML5…)
* Manipulated the embed iframe to include:
- Sandbox="allow-same-origin allow-scripts allow-popups"
- Src will include ?api=1
Image Chrome
Image Internet Explorer
Inspected the embedded code in IE shows a button "Enter full screen". This has the class:
.no-fullscreen-support.player .fullscreen {
Display: none !important;
}
Is there something else I can try? Missing?
Any help is appreciated!
The title pretty much sums my question up. I've given a cursory glance to https://developers.google.com/youtube/iframe_api_reference and have searched online but all I have found are explanations on how to get an embedded video to autoplay (the first video only) while preventing the suggested videos list at the end. I think that perhaps the logic for playing suggested videos is only supported on youtube.com itself, a conclusion that might be supported by the autoplay button being outside of the video element.
As a worst case solution, I thought maybe if I could save a youtube.com page to my desktop I could modify the styling to only show the video. But alas, the page breaks when I try to load it from my hard drive as opposed to the website.
Edit: Take note that I'm talking about two different types of autoplay here. One is the autoplaying of suggested videos as seen in the picture, and that is the type of autoplay I want to be able to use in an embedded player. The other type of autoplay that I don't need help with is getting the embedded player to automatically play the video that is contained in its iframe src, aka the first video.
Since you marked iframe under your tags and I can't comment, I will try to answer.
If you're using iframe then make sure
autoplay=1"
is on
<iframe id="ytplayer" type="text/html" width="720" height="405"src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1"frameborder="0" allowfullscreen>
I found a link that will build it for you. It was a bit into the api link you gave.
https://developers.google.com/youtube/youtube_player_demo
You can give it the video and tell it what you want it to do.
Basically I would like to display a chromeless video on desktop browsers and a fallback that works for mobile browsers. The default video on the iPad is fine. But by displaying the chromelesss youtube player for desktop browsers, you get the blue brick for iOS, http://www.theipadguide.com/images/content/announce-noflash.jpg.
Ultimately I could detect if flash is supported and insert the regular YouTube embed code for the iPad and iPhone (assuming it would replace the embed code with its custom YouTube player) but that feels wrong.
How could I successfully detect if the browser is replacing the YouTube embed code with its on player?
You can see the player in action on this web page:
http://technobolt.com/wp-content/uploads/2010/12/youtube-embed-wp7.jpg
Typically the iPhone displays the blue puzzle piece: http://www.theipadguide.com/images/content/announce-noflash.jpg
This is info on the chromeless YouTube player for desktop.
http://badsyntax.github.com/jquery-youtube-player/
http://www.viget.com/inspire/youtube-chromeless-video-jquery-plugin/
Perhaps include the regular YouTube embed code as the alt html, e.g.:
<object ...> <!-- chromeless embed ->
<!-- regular embed here ->
</object>
I think you're looking for this: http://code.google.com/apis/youtube/getting_started.html#chromeless_player