Can anybody help me on this, when I embed a google drive video using an iframe it has two play button, how to remove one of this? This happens only in Chrome and Safari so please test it on those browsers.
<iframe src="https://drive.google.com/file/d/1mNaIx2U3m7zL9FW-wksaI1m_rL5Oh47v/preview" width="400" height="300" allowfullscreen="true"></iframe> As you can see on the iframe that you have to click the play button twice.
Also I cannot use html5 player since most of the videos are large.
here is my fiddle https://jsfiddle.net/1tav74q8/
2 Answers
Answers 1
As far as i am aware of you can not edit iframe content which does not originate on your own server. But i am not sure..
Check this post for a sample
Also interesting from this link:
- Get the unique video identifier (0B6VvIWR7judDX25yUGxVNERWUj)
Put into this html:
Answers 2
If your iframe and the host have the same origin (domain), interaction between them is easy, simply access the document object to get the element. Example using jQuery:
- To hide a button on host element from iframe, use:
window.parent.jQuery('button').hide(). - To hide a button on iframe element from host, use:
jQuery('iframe')[0].contentWindow.jQuery('button').hide()
HOWEVER, if the host and the iframe doesn't have same origin, interaction between each of them are strictly limited. you cannot instruct certain operation directly from the host to the iframe's javascript window or document, and vice versa. And from that, it's safe to say that accessing directly the iframe's DOM element from the host is definitely impossible.
Explanation about Cross-origin script API accessSection from MDN.
JavaScript APIs such as iframe.contentWindow, window.parent, window.open and window.opener allow documents to directly reference each other. When the two documents do not have the same origin, these references provide very limited access to Window and Location objects, as described in the next two sections.
To communicate further between documents from different origins, use window.postMessage.
You can use the window.postMessage function and "message" event listener, to send and receive a message between host and iframe (and vice versa). In your case you would need to sent a message from host to instruct the iframe to hide a button. Then on the receiver end (iframe), get the desired button then hide it. But this technique only works if you own those two origin, you need to declare the "message" event on the iframe end, and since your iframe source is drive.google.com which I assume you are not the owner, then it's definitely impossible.
More explanation: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
0 comments:
Post a Comment