How to stop "pop out" in embedded video with from google drive</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2016-05-23T11:50:10.287" class="fromnow">May 23 '16 at 11:50</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2023-02-23T08:17:16.230" datetime="2023-02-23T08:17:16.230">Feb 23 '23 at 08:17</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 28,721 times"> <span class="fc-light mr2">Viewed</span> 2.9k times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="37390231" data-ownerid="6370933" data-score="1"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="37390231"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>with Google Drive you may embed videos in your website with the tag:</p> <pre><code><iframe src="https://drive.google.com/file/d/LINKTOMYFILE/preview" width="640" height="480" frameborder="0" scrolling="no" seamless></iframe> </code></pre> <p>on the <strong>Top Right there is a Gray Box</strong>. This takes you to the download / embedding GoogleDrive page. I'd like to stop that.</p> <p>Anyone one knows <strong>how to hide</strong> it?</p> <p><strong>Or at least how to mask it</strong> with a customs CSS?</p> <p>this is what I get by inspecting the element in the div:</p> <p></p><div class="snippet" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code><div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;"> <div class="drive-viewer-icon drive-viewer-nav-icon"> </div></div></code></pre> </div> </div> </div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/video" class="post-tag js-gps-track" title="show questions tagged 'video'" rel="tag">video</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> <a href="../../questions/tagged/embed" class="post-tag js-gps-track" title="show questions tagged 'embed'" rel="tag">embed</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 23 '16 at 11:55">edited May 23 '16 at 11:55</time> <a href="../../users/4197505/thomas-g" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4197505.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Thomas G" /> </a> <div class="s-user-card--info"> <a href="../../users/4197505/thomas-g" class="s-user-card--link">Thomas G</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">9,886</li> <li class="s-award-bling s-award-blinggold" title="7 gold badges">7</li> <li class="s-award-bling s-award-blingsilver" title="28 silver badges">28</li> <li class="s-award-bling s-award-blingbronze" title="41 bronze badges">41</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 23 '16 at 11:50">asked May 23 '16 at 11:50</time> <a href="../../users/6370933/fra-oaks-jv" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/6370933.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Fra Oaks Jv" /> </a> <div class="s-user-card--info"> <a href="../../users/6370933/fra-oaks-jv" class="s-user-card--link">Fra Oaks Jv</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">89</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badge">1</li> <li class="s-award-bling s-award-blingbronze" title="4 bronze badge">4</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">11 Answers<span style="display:none;" itemprop="answerCount">11</span></h2> </div> </div> </div> <a name="37399967"></a> <div id="answer-37399967" class="answer " data-answerid="37399967" data-ownerid="6370933" data-score="7" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="37399967"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="7">7</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Thank you Thomas! Good Idea!</p> <p>The following does the job for me. The pop-out is not hidden (it hides itself after few seconds) but it stays inaccessible. I think it is the least ugly solution.</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><div style="width: 640px; height: 480px; position: relative;"> <iframe src="https://drive.google.com/file/d/LINKTOMYFILE/preview" width="640" height="480" frameborder="0" scrolling="no" seamless=""></iframe> <div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;">&nbsp;</div> </div></code></pre> </div> </div> <p>PS The "opacity: 0" is a workaround for Mozilla</p> <p>You can also masking the pop-out button with whatever image you like using above code. Make sure the size of the masking image is 48x48 pixel and transparent background. Here is the modified version of the code.</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><div style="width: 640px; height: 480px; position: relative;"> <iframe src="https://drive.google.com/file/d/1MfhMdv4mw_20UWENUSt1PzmU7IQVpCXf/preview" width="640" height="360" allow="fullscreen" frameborder="0" scrolling="no" seamless=""> </iframe> <div style="width: 48px; height: 48px; position: absolute; right: 6px; top: 6px;"> <img src="https://i.ibb.co/bJNBHXp/guitar-1.png"> </div> </div></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Feb 23 '23 at 08:17">edited Feb 23 '23 at 08:17</time> <a href="../../users/5279675/tiomno" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/5279675.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="tiomno" /> </a> <div class="s-user-card--info"> <a href="../../users/5279675/tiomno" class="s-user-card--link">tiomno</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,178</li> <li class="s-award-bling s-award-blingsilver" title="26 silver badges">26</li> <li class="s-award-bling s-award-blingbronze" title="31 bronze badges">31</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered May 23 '16 at 20:27">answered May 23 '16 at 20:27</time> <a href="../../users/6370933/fra-oaks-jv" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/6370933.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Fra Oaks Jv" /> </a> <div class="s-user-card--info"> <a href="../../users/6370933/fra-oaks-jv" class="s-user-card--link">Fra Oaks Jv</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">89</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badge">1</li> <li class="s-award-bling s-award-bling__bronze" title="4 bronze badge">4</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-37399967" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="37399967" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-120759987" class="comment js-comment " data-comment-id="120759987" data-comment-owner-id="4665984" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment120759987_37399967"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">OMG the best answer ever</span> – <a href="../../users/4665984/hardy" title="2,576 reputation" class="comment-user ">Hardy</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/37390231/how-to-stop-pop-out-in-embedded-video-with-iframe-from-google-drive#comment120759987_37399967"><span title="2021-07-10T14:11:17.977 License: CC BY-SA 4.0" class="relativetime-clean">Jul 10 '21 at 14:11</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="37390962"></a> <div id="answer-37390962" class="answer " data-answerid="37390962" data-ownerid="3461722" data-score="4" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="37390962"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="4">4</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You can't prevent it from popping out as that's something Google implemented. You also can't change the button normally as it's Google's page and you can't modify it.</p> <p>You can't "reach" into the page loaded by an iframe and modify it, unless you have cross-site scripting enabled on the child page (google's page), and Google would never allow that for security reasons. If that would be able I could serve people a Google Drive page but for example modify the download button to download malware.</p> <p>The only solution would be to place a div over the iframe, on top of the button. But still, it's not really pretty and usually frowned upon. Google offers the service for free so they determine how people use it.</p> <p>If you run the example below, look at the red box at the top right corner.</p> <p>Something like:</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.hidebtn { width: 100px; height: 30px; line-height: 30px; text-align: center; color: #FFF; background: #FF0000; position: absolute; right: 50px; top: 50px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="hidebtn">button</div> <iframe src="https://www.example.com" frameborder="0" width="100%" height="500"></iframe></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2020-12-03T19:44:10.510" class="relativetime">Dec 03 '20 at 19:44</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">s1h4d0w</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered May 23 '16 at 12:23">answered May 23 '16 at 12:23</time> <a href="../../users/3461722/s1h4d0w" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3461722.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="s1h4d0w" /> </a> <div class="s-user-card--info"> <a href="../../users/3461722/s1h4d0w" class="s-user-card--link">s1h4d0w</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">762</li> <li class="s-award-bling s-award-blingsilver" title="6 silver badges">6</li> <li class="s-award-bling s-award-blingbronze" title="27 bronze badges">27</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="45678546"></a> <div id="answer-45678546" class="answer " data-answerid="45678546" data-ownerid="8463146" data-score="4" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="45678546"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="4">4</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>It should be like this. I hope it's working.</p> <pre><code><div style="width: 640px; height: 480px; position: relative;"> <iframe src="https://drive.google.com/file/d/0BxLbnVHP6GWpV2ZIZEc4SkNTOTQ/preview" width="640" height="480" frameborder="0" scrolling="no" seamless=""></iframe> <div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div> </div> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Aug 14 '17 at 16:33">edited Aug 14 '17 at 16:33</time> <a href="../../users/6714194/u32i64" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/6714194.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="u32i64" /> </a> <div class="s-user-card--info"> <a href="../../users/6714194/u32i64" class="s-user-card--link">u32i64</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,384</li> <li class="s-award-bling s-award-blinggold" title="3 gold badges">3</li> <li class="s-award-bling s-award-blingsilver" title="22 silver badges">22</li> <li class="s-award-bling s-award-blingbronze" title="36 bronze badges">36</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Aug 14 '17 at 16:02">answered Aug 14 '17 at 16:02</time> <a href="../../users/8463146/asd" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/8463146.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="asd" /> </a> <div class="s-user-card--info"> <a href="../../users/8463146/asd" class="s-user-card--link">asd</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">41</li> <li class="s-award-bling s-award-bling__bronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-45678546" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="45678546" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-134805958" class="comment js-comment " data-comment-id="134805958" data-comment-owner-id="13394334" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment134805958_45678546"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Don't work. Do `tab`, `tab`, `tab` and `space` or `Enter`</span> – <a href="../../users/13394334/ulises-antonio-chavez" title="144 reputation" class="comment-user ">Ulises Antonio Chávez</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/37390231/how-to-stop-pop-out-in-embedded-video-with-iframe-from-google-drive#comment134805958_45678546"><span title="2023-06-11T22:14:28.703 License: CC BY-SA 4.0" class="relativetime-clean">Jun 11 '23 at 22:14</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="71510887"></a> <div id="answer-71510887" class="answer " data-answerid="71510887" data-ownerid="18492612" data-score="3" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="71510887"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="3">3</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>A simple option is to avoid popups using <a class="external-link" href="https://www.w3schools.com/tags/att_iframe_sandbox.asp" rel="nofollow noreferrer">sandbox parameter</a> and allowing just options that need google drive to reproduce the video:</p> <pre><code><iframe src="https://drive.goo..." sandbox="allow-same-origin allow-scripts"></iframe> </code></pre> <p>It doesn't hide the button, but it prevents the iframe to popup a new window so the button becomes useless.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 17 '22 at 10:37">answered Mar 17 '22 at 10:37</time> <a href="../../users/18492612/fernando-lobo" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/18492612.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Fernando Lobo" /> </a> <div class="s-user-card--info"> <a href="../../users/18492612/fernando-lobo" class="s-user-card--link">Fernando Lobo</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">31</li> <li class="s-award-bling s-award-blingbronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="51415407"></a> <div id="answer-51415407" class="answer " data-answerid="51415407" data-ownerid="10103326" data-score="2" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="51415407"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>For me the answer by u32i64/asd worked well to stop the icon being clickable. To get rid of the black bars too i changed the code to this:</p> <pre><code><div class="responsive-container"> <iframe src="https://drive.google.com/file/d/1Fy4AwZZVF-DLAenTSxQl93icdXfef/preview" frameborder="0" scrolling="no" seamless=""></iframe> <div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div> </code></pre> <p>Make sure the http address ends with 'PREVIEW')</p> <p><em>Important</em> You have to add this to your 'additional CSS':</p> <pre><code>.responsive-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; } .responsive-container iframe, .responsive-container object, .responsive-container embed { position:absolute; top:0; left:0; width:100%; height:100%; } </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2018-07-19T07:01:14.897" class="relativetime">Jul 19 '18 at 07:01</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Darius</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jul 19 '18 at 06:03">answered Jul 19 '18 at 06:03</time> <a href="../../users/10103326/darius" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/10103326.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Darius" /> </a> <div class="s-user-card--info"> <a href="../../users/10103326/darius" class="s-user-card--link">Darius</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">21</li> <li class="s-award-bling s-award-blingbronze" title="2 bronze badges">2</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="64233546"></a> <div id="answer-64233546" class="answer " data-answerid="64233546" data-ownerid="13795077" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="64233546"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Thanks s1h4d0, It worked for me, maybe in terms of programming it is not the best, but it works and I thank you.</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.hidebtn { width: 60px; height: 60px; position: absolute; right: 5px; top: 5px; background: #000000; /remove this if you want to put only the logo./ }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><iframe src="https://drive.google.com/file/d/1O71QlISu_yRvT5Q1_h3S8OHocjgpuhIx/preview" frameborder="0" width="100%" height="500"></iframe><div class="hidebtn"><img src="https://mungowarez.net/wp-content/uploads/2020/10/44918-O48GVC-01-2.png"></div></code></pre> </div> </div> <p>If the above code doesn't work, add the inside the div and then add the image, do it like this: </p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.hidebtn { width: 60px; height: 60px; position: absolute; right: 5px; top: 5px; background: #000000; /remove this if you want to put only the logo./ }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="hidebtn"><iframe src="https://drive.google.com/file/d/1O71QlISu_yRvT5Q1_h3S8OHocjgpuhIx/preview" frameborder="0" width="100%" height="500"></iframe><img src="https://mungowarez.net/wp-content/uploads/2020/10/44918-O48GVC-01-2.png"></div></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2020-10-07T16:03:18.543" class="relativetime">Oct 07 '20 at 16:03</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">JogonPav</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Oct 06 '20 at 20:43">answered Oct 06 '20 at 20:43</time> <a href="../../users/13795077/jogonpav" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/13795077.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="JogonPav" /> </a> <div class="s-user-card--info"> <a href="../../users/13795077/jogonpav" class="s-user-card--link">JogonPav</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">11</li> <li class="s-award-bling s-award-blingbronze" title="2 bronze badges">2</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="38908946"></a> <div id="answer-38908946" class="answer " data-answerid="38908946" data-ownerid="6707513" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="38908946"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I figured it out. Change the drive.google.com in the URL to googledrive.com and some other changes:</p> <ol> <li>Get the unique video identifier (0B6VvIWR7judDX25yUGxVNERWUj) </li> <li>Put into this html: </li> </ol> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><body oncontextmenu="return false;"> <video src="http://googledrive.com/host/0B6VvIWR7judDX25yUGxVNERWUj" controls width="100%" height="auto"></video> </body></code></pre> </div> </div> <p>The "body oncontectmenu" simply removes the ability to right-click anything on the screen, because without this you can right click the video and download the file. Of course the right click ability is removed from the whole page and people can still find the file by inspecting the page source.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2016-08-12T02:36:53.727" class="relativetime">Aug 12 '16 at 02:36</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Richard Allen Crook</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Aug 12 '16 at 02:31">answered Aug 12 '16 at 02:31</time> <a href="../../users/6707513/richard-allen-crook" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/6707513.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Richard Allen Crook" /> </a> <div class="s-user-card--info"> <a href="../../users/6707513/richard-allen-crook" class="s-user-card--link">Richard Allen Crook</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingbronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="41935419"></a> <div id="answer-41935419" class="answer " data-answerid="41935419" data-ownerid="7056919" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="41935419"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code><div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;"> <div class="drive-viewer-icon drive-viewer-nav-icon"> </div></div></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 30 '17 at 12:00">answered Jan 30 '17 at 12:00</time> <a href="../../users/7056919/harish-rathor" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/7056919.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Harish Rathor" /> </a> <div class="s-user-card--info"> <a href="../../users/7056919/harish-rathor" class="s-user-card--link">Harish Rathor</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingbronze" title="3 bronze badges">3</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="63870816"></a> <div id="answer-63870816" class="answer " data-answerid="63870816" data-ownerid="14269670" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="63870816"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>There is a more simple method of blocking the pop-out on googledrive video's and docs, Wherever you are placing the html,inline frame or lightbox on your website page, insert a rectangular shape and place it over where you want to block the pop-out. Next- click on the shape to get it's properties, there you should find a number of options clear all the other options, unless you want to insert your own link or logo, make the the shape transparent, if you have the option of showing a border line I would advise keeping this to 1 setting until you have covered the position of the pop-out, once you have found the correct position, remove the border line and lock it in place. this works as I have used this method many times to block out links that appear on video's and documents, it is simple and does not require the use of any code. This method will only work if you have set the dimensions of your document or video, once you done all that test your video or document, you will find that the icon still appears but unable to click on it. you can use this method to stop the user gaining access to your information or a third party website which takes them away from your page. this method can also be used for preventing someone right clicking over your video or documents and photographs, if they try to copy it, a black box is all they will get. however,you may still get the info from elements/source code.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2020-09-14T09:58:47.507" class="relativetime">Sep 14 '20 at 09:58</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">james McCallum</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Sep 13 '20 at 12:33">answered Sep 13 '20 at 12:33</time> <a href="../../users/14269670/james-mccallum" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/14269670.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="james McCallum" /> </a> <div class="s-user-card--info"> <a href="../../users/14269670/james-mccallum" class="s-user-card--link">james McCallum</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingbronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="65129288"></a> <div id="answer-65129288" class="answer " data-answerid="65129288" data-ownerid="14757492" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="65129288"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I tried the previous suggestions and they did not work because "Google Drive refused to connect".</p> <p>I came up with a completely different approach to solve the original problem (to avoid "download / embedding GoogleDrive page"), which is very simple:</p> <ol> <li><p>Create a Google Slides presentation, insert in a slide the video you have in Google Drive.</p> </li> <li><p>Select File - Publish to the web - Embed, and copy the code that is generated.</p> </li> <li><p>In Google Sites, select Embed - Embeded code, and paste it there.</p> </li> </ol> <p>This solution provides also more options that you control in Slides for the videos, such as automatic playing, select timing of the video, etc.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Dec 03 '20 at 15:47">answered Dec 03 '20 at 15:47</time> <a href="../../users/14757492/leo-a" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/14757492.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Leo A." /> </a> <div class="s-user-card--info"> <a href="../../users/14757492/leo-a" class="s-user-card--link">Leo A.</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="66827253"></a> <div id="answer-66827253" class="answer " data-answerid="66827253" data-ownerid="15490398" data-score="-3" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="66827253"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="-3">-3</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code><div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;"> <div class="drive-viewer-icon drive-viewer-nav-icon"> </div></div></code></pre> </div> </div> Mano Souza · RIO DE PEDRAS.hmtl</div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 27 '21 at 01:40">answered Mar 27 '21 at 01:40</time> <a href="../../users/15490398/ms-souza" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/15490398.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="MS Souza" /> </a> <div class="s-user-card--info"> <a href="../../users/15490398/ms-souza" class="s-user-card--link">MS Souza</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">3</div></a> <a href="../../questions/52676713/remove-one-of-the-two-play-button-on-google-drive-iframe-embed" class="question-hyperlink">Remove one of the two play button on google drive iframe embed</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>