I have a website which contains youtube flash player. Player's code was copied from Youtube and pasted to an HTML of my page.
When I'm opening the page in iPhone or iPad, the player can't be covered by absolute positioned DIV tag. The div tag has z-index 1000 and covers all elements (youtube flash player too) on the page if I use normal PC. But in iPhone or iPad I can't cover youtube player by this div element.
I used many tricks with OBJECT and EMBED tags of flash element (adding style="position:absolute; z-index:0" and etc.) but no results.
Please assist how can I cover Flash element in iPhone or iPad.
please use an iframe. That's the way I've done it.
I found that on the iphone there are certain things that dont work but will work on a pc. I believe however Iframes are quite versatile with stuff.
Try it out. Let me know if it works.
You just had to add ?wmode=transparent at the end of the url of the youtube embed code to fix the problem.
It should work!
Related
My client's site usesfancybox to load a lightbox for an embedded YouTube video. Clicking on the "play" image button in the middle of the video launches an embedded YouTube video.
This works fine on desktop, but will not work on my iPhone X (iOS 12). It will sometimes work for other iphone users after 3-4 clicks on the play button, but I cannot load it at all.
What should I be looking at to fix this on iOS? This is driving me crazy!
Page in question: https://www.maternlawgroup.com/
First, fancybox works fine, you can clearly see on the homepage or any other demo.
Secondly, in situations like this, you should start by checking output of browser console. There are a lots of JS errors on your page (not related to fancybox) and any JS issue can prevent further execution of the code. So, start by fixing them.
And last, I could not find fancybox on your page. It looks like you are using buggy custom JS code.
I couldn't find a proper explaination, tutorial or thread online explaining the following: I "simply" want to load a Vimeo Video (where I have a pro-Account) without controls (play, pause, timeline, whatsoever) just the pure video (also without the black bar top and bottom) and stream it within a div I created. I want the video to be always fully filling this div.
How can I use the Vimeo-API to do that? I found examples of the Vimeo-API but nowhere I could find anything regarding loading the plain video file.
According to this answer, your Vimeo videos should have a "play in external player" link (Pro account required):
Go to your Video Settings and Video File, at the bottom there is a section called Use Your Own Player, you'll find there direct urls to your video.
You can embed that direct URL in a player of your choice - e.g. a <video> element:
<video src="http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4"></video>
You can create that <video> element using JavaScript, as well.
A plain <div> element can not dispplay video without some element to aid it.
I have a site (which is only viewed using Internet Explorer 7) that is made up of 5 sections and in section 2 I am currently using Vimeo to embed a video. The requirement is that the user has to watch all of it before proceeding to the next section. In order to achieve this I have used event listeners which only activate the ‘Next’ button to proceed when all of the video has been watched (Works Great)
Another requirement is for users to be able to play the video in full screen but the problem I have using Vimeo is that it does not support the option to hide the progress bar when a video is playing in full screen, this allows the user to skip the video. After researching around and contacting Vimeo support I can confirm that hiding the progress bar can only be achieved when viewing the video in standard mode when you have subscribed to the pro account (which I have).
I looked into targeting the CSS classes within the iFrame, and setting a display none value on the controls div but this is something that can’t be done.
I have looked at using YouTube as an alternative and you are able to hide the progress bar in full screen using this markup
<iframe width="560" height="315" src="https://www.youtube.com/embed/C0DPdy98e4c?rel=0&controls=0&showinfo=0?&fullscreen=1" frameborder="0" allowfullscreen=1></iframe>
I’ve done some reading on using the YouTube Player API Reference for iframe Embeds (https://developers.google.com/youtube/iframe_api_reference) but it says that one of the requirements is that the user's browser must support the HTML5 postMessage feature - INTERNET EXPLORER 7 DOES NOT SUPPORT IT :(
Could anyone suggest how I can achieve this, either by hiding the progress bar using vimeo in full screen or by implementing the youTube Iframe API to work with IE7?
Cheers
Paul
I don't see a parameter to remove the controls in a Vimeo video on their page on embedding. Also, the Vimeo FAQs say that the control bar gets hidden on an embedded video when it's less than a specified number of pixels wide.
You might have to do some sneaky CSS styling stuff instead. I did manage to find an article on hiding controls on an HTML5 video when viewing it fullscreen, but it said that IE does not support the full-screen API, so I'm not entirely sure what you're trying to do is actually possible on IE.
This is a bug that I have managed to fix by brute force, but I don't understand why the solution worked.
The problem was that embedded YouTube videos weren't working on a particular (responsive) site on iPad (tested in iOS7) in landscape view. I managed to narrow it down to a particular CSS rule that was showing a search input in the header when the browser was wide enough, so it would show in an iPad's landscape view but not in its portrait view.
After a little more brute force fiddling, I found that removing the type="search" from the input tag (which causes it to fall back to the default type="text") would fix the problem. None of my searches have come up with an explanation for why this works though, or even anyone else experiencing the same thing.
Some more details on the bug
The site works by showing an image at first, which would be replaced via JavaScript with the YouTube iframe when clicked. After this first click, it would autoplay on desktop browsers, and on the iPad it would load the video but wouldn't play until the user presses it again.
If the type="search" input was visible (display: block;), then tapping on the embedded video would not cause it to play; there would be no visible response to the tap. If I zoomed in and tapped on the controls at the top, like the name of the video, I could see them being underlined, and testing showed that there was no element covering the iframe and intercepting events.
Strangely, tapping on the very edge of the right hand side of the iframe would cause the video to start playing correctly. Otherwise, changing the iPad to portrait view (causing the search input to be hidden via CSS) would enable the iframe to be clicked in order to start the video playing. After that first click, all the video controls would work regardless of whether or not the search input was showing.
Just experienced this first-hand myself and wanted to add my kudos for you having written this up. Your SO question, even without an answer, pointed me in the right direction.
In my case it was nothing to do with Youtube. I had a page generated by Drupal in a large-ish site, in which the site-wide search mechanism used an auto-complete drupal module which had type="search" as the main input's type.
In IOS, users reported that Facebook, Twitter and Google Plus's respective "like" buttons all didn't work, along with a much larger angular app embedded in the page. They all used iframes and none of them seemed to respond to clicks.
Changing this seemingly innocuous, unrelated input's type from search to text solved this problem immediately.
Baffling.
So here's the challenge. Make a clickable popcorn link OVERLAYING the video. Simple enough on desktop, but iOS is proving to be a challenge. If the video element has the controls attribute iOS hijacks all clicks within the video window, making the link overlay un-clickable. However if the controls attribute is not present on the video element, the popcorn links are clickable and work well.
Problems is, now there are no video controls. And I need those. So I figured some hand written javascript based video controls should work out fine. No controls attribute on the video tag so popcorn overlays are clickable, plus working controls! My attempt with this is to use video.js.
So now I have video.js video controls and popcorn living in harmony on desktop. But on iPad the video.js part works, but the popcorn part doesn't anymore. I get the video.js controls, but no popcorn events fire. However there are NO ERRORS, and the script executes completely.
Does anyone know what is happening here? Why would video.js stop popcorn only on iOS? Is there a solution?
PROBLEM DEMO
VideoJS has to make changes to your web page to insert all its controls and get them positioned correctly, and that includes moving the video element around. Mobile Safari is notoriously sensitive and a little bit weird about this stuff. It looks like VideoJS is removing your original video element and replacing it with a new one, and this is happening after Popcorn has attached it self to the original.
Debugging minified Javascript on Mobile Safari is no picnic, so I can't tell exactly why VideoJS is doing this on the iPad and not other browsers. But using the console, it's possible to get a rough idea what's going on:
document.getElementsByTagName('video')[0] ===
window.Popcorn.instances[0].media
//false!
That means the video element that Popcorn is listening to is not the same one that you're seeing and playing in your web page. From this command...
window.Popcorn.instances[0].media.parentNode //null!
...you can see that the original tag exists in memory but is not attached to the DOM. So while the new video plays along, the original one is stuck paused at 0:00.
The solution is to set up your Popcorn instance after VideoJS is done doing its business. And then make sure you reference the video element properly, because now '#popacorn' references a <div>, and the new video element is called "popacorn_html5_api". That should cover you for iOS as well as desktop browsers.
I had the same problem in Firefox. Popcorn not working with videoJS.
I solved my problem like this:
jQuery(function(){
_V_('videoid').ready(function() { // videoJS ready ?
console.info('videoJS ready : player ID = '+$(this).attr('id'));
console.info('videoJS ready : videoObj ID = '+$('#videoid video').attr('id'));
var pop = Popcorn( "#"+$('#videoid video').attr('id') );
// etc...
});
});
Like said brianchirls, videoJS makes a div id = "videoid" containing a video id = "videoid_html5_api", so the object id="videoid" is no longer a video object.