Remove one of the two play button on google drive iframe embed

Question

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/

can anybody help me on this? is this impossible to do? maybe some kind of alternative or something — Francis Alvin Tan, Oct 08 '18 at 11:59
I'm not sure it's allowed with drive... You should use youtube which permit this — davidonet, Oct 12 '18 at 14:51
@Faheem It's not that the two play buttons can be seen simultaniously. They appear one after the other. You click the first and the second one appears which you have to click before the video starts. — yunzen, Oct 15 '18 at 07:51

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

TL;DR; it's impossible to directly modify the content inside the iframe that comes from different origin that you don't own.

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