Embedded Youtube video Full Screen Works with Firefox But Not Chrome - javascript

So I have a problem with using an embedded youtube video.
Here is my iframe code
<iframe width="560" height="370" src="https://www.youtube.com/embed/PrTXCPex_3o" allowfullscreen="allowfullscreen" frameborder="2"></iframe>
As you can see, I am using allowfullscreen, in fact, it works perfectly fine for Firefox. However, when I try it with chrome, it just sends me to the top of the page and freezes up there until I hit the escape key. It is almost like hitting fullscreen is making the browser go fullscreen (Like hitting F11 In windows) instead of the video.
Any help would be greatly appreciated!
Here is a live test website of my project so you guys can test it yourself with multiple browsers.
http://tech-solutions-llc.com
Thanks again!

Related

Video tag not showing source video on chrome android

I have a .webm video that I am dynamically setting as the source for the video tag.
vidPlayer = document.getElementById("player");
vidPlayer.src = videoPath;
The corresponding HTML:
<body>
<video id="player" class="video-player"></video>
</body>
This is working perfectly on the web browser but when I view this on my mobile, I get a white screen.
I checked the elements tab in the developer tools if different HTML was getting rendered, but it wasn't.
However, in the network tab for chrome web, there is a call made to fetch the video but the same does not happen for chrome android.
I am running this code on localhost.
Can anybody tell me what I am doing wrong or why this is happening?
So, apparently, if your video does not have controls enabled, then for mobile browsers, the user must interact(tap or swipe on the screen) for the video to be visible on the screen.
With controls enabled the video is visible from the start.

jQuery player brought in by iframe won't auto play but pop out does

I have a rather strange issue with my jPlayer. I have been using this player for about 2 years now, and it's worked great iframed from my server into a web page elsewhere. Recently I did move the players from GoDaddyto my hosted WHM server. I at least thought they worked properly after but now when you open a page with it the music names n title scrolls fine but no music.
But if you hit the pop out box upper right, a new pop out box appears, and it plays fine and no longer had the little square for the pop out. As an experiment I copied the pop out link back into the iframe and ended up the pop out link box wasn't there and still no music. I tried re-copying the entire player directory again from GoDaddy and had the same experience. Was there maybe a change with Chrome and iframe security?
If I put the link in the original iframe directly into the address bar in Chrome it works fine, as does the url that accompanies the pop out.
I'm a baby at best when it comes to this but often I don't hear from my developer for some time and I am trying to learn.
<IFRAME src="http://players3.djextreme.net/global/index.php?stream=8004" width="375" scrolling="no" height="350" frameborder="0"></iframe>
I can get to the various codes but this is the start. There are many players back ended into the same player vix XML file but none of that has changed. This also works fine in IE and Firefox.
It doesn't function in the Snippet because of strict security but it works in this `PLUNKER. I'm not sure what you are asking...
<iframe src="http://players3.djextreme.net/global/index.php?stream=8004" width="375" scrolling="no" height="350" frameborder="0" allowfullscreen></iframe>

Mozilla opens youtube video in flash player

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.

iFrame fails to load in iOS Safari until reloaded

I have a simple iframe which is used to display a vimeo video on my site, as so:
<div class="video">
<iframe src="//player.vimeo.com/video/88893424" width="960px" height="540px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And it works like a charm on all standard computer browsers. Ajax is used throughout the site, and transitioning between pages that have videos and don't work exactly as you would expect - Ajax grabs the new page content, slides it on, deletes the old content, and the video works perfectly.
However, on iOS Safari, the video does NOT load. The space for the video is reserved - the other content on the page flows around the area where the video should be, which tells me the div is loading, and the height and width information of the iframe element is being registered by the browser. But no video, nothing. Reload the new page, though, and the video is there and plays just fine.
So my question is: Why is the reload required? What could I be doing wrong that is causing the AJAX to fail? I have read several answers across SO that seem to incriminate header information and cross-site drama, but it is danced around and not explained. Can anyone give me a clear understanding of what's going on here?

Flowplayer video won't go fullscreen in ie11

Playing around with flowplayer videos, and I can't seem to managed to get the video to go full screen in IE11 . It works just fine in Firefox and Chrome, but not in IE11 . I've tested and seen that flowplayer videos will go fullscreen in IE11 when I open the demos on flowplayers website. Any idea what I might have done wrong?
My site : http://clients.geantduweb.ca/index.php?tmpl=flowplayer&video_id=1
A flowplayer hosted demo: https://flowplayer.org/standalone/skins/minimal.html
Is there a problem with my configurations, a basic css problem or something else I managed to mess up?

Categories

Resources