Add CSS to iframe page?

Question

Before I begin, I want to apologize in advance if this question is a duplicate or part of my grammar isn't perfect to the unbelievably-ridiculous standards of asking a question using this service - I'm almost pathetically too scared to ask on here with the worry of getting abused because my question seems "too long to read" or is "too alike" the others - but I HAVE tried MANY of the answers/solutions provided to similar questions BEFORE asking, with none of them helping solve my specific case. Even some of the similar-question's answers aren't relevant to my case but I still tried them, with no luck of course.

In simple terms, I have uploaded a video to Google Drive that I wish to embed onto my website. I retrieved an embed code from the shared-video page for my video on Google drive:

<iframe src="https://drive.google.com/file/d/0B8DK7pele_HjWUR6Ym9KNFU5YTQ/preview" width="640" height="480"></iframe>

As you can see, this is simply an iframe to the URL: https://drive.google.com/file/d/0B8DK7pele_HjWUR6Ym9KNFU5YTQ/preview

When visiting the above URL, I am presented with a full-screen view of a YouTube-style video player (after clicking the play-button in the centre of the image), and a very frustrating 'Pop out' arrow symbol (to the top-right of the page). I do NOT want the users of my website to link back to the Google Drive shared-video page for my video (i.e. https://drive.google.com/file/d/0B8DK7pele_HjWUR6Ym9KNFU5YTQ/view). All I want to do is remove the annoying 'Pop out' arrow-symbol option.

Using Google Chrome, I did a little test by right-clicking on the 'Pop out' arrow symbol and clicked on 'Inspect element' - this brought me to the page's code, with an irrelevant piece selected. I managed to find the fade-style button/bar's div element - the code for this is:

<div class="drive-viewer-v2-toolstrip" role="toolbar" style="width: 52px; right: 0px; opacity: 0;"></div>

I edited the code to see if adding this simple piece of CSS code: display: none, would work:

<div class="drive-viewer-v2-toolstrip" role="toolbar" style="width: 52px; right: 0px; opacity: 0;display: none;"></div>

And it did - when I hovered my cursor over the 'Pop out' arrow image, it didn't display. When I clicked in its area, instead of opening the Google Drive shared-video page, it played the video.

The only problem with this is that it was a test editing the code on the actual video's page. What I REALLY want to know is: is there ANY way, using ANY programming language (HTML, CSS, JavaScript, PHP, etc.), to remove this frustrating 'Pop out' arrow on MY page via the iframe? I've been spending hours trying to use javascript code, css code, even php code from answers to similar questions and even different websites with NO luck.

I want to add CSS to the page as if I were adding it to the official video-page (the page my website iframes to via the embed code given by Google) - I think this CSS is correct:

.drive-viewer-v2-toolstrip {
display: none;
}

I understand something to do with 'cross-domain' rules prevents this code from having any effect on the iframe page - but is there any way, even a hack, to simply add that code OR remove the 'Pop out' symbol image?!

As you can tell, I'm NOT an experienced programmer, so some support would be greatly appreciated.

Notes: - The video used is only for example purposes - it's not the actual video but I assume I can just change the iframe src to the actual video's URL. - To see my test page, go here: http://freemedia.x10.mx/index.html (sorry - this website is childish and won't allow me to post more than two links just because I don't have "10 reputation").

Answer 1

Have you tried directly embedding the video using HTML5's <video> tag (which is what is inside your iframe anyway)?

<video class="video-stream html5-main-video" style="width: 640px; height: 480px; left: 0px; top: -480px; transform: none;" src="https://r10---sn-4g57kney.c.docs.google.com/videoplayback?requiressl=yes&amp;shardbypass=yes&amp;cmbypass=yes&amp;id=951765eacbdee2ee&amp;itag=18&amp;source=webdrive&amp;app=docs&amp;ip=217.5.178.213&amp;ipbits=0&amp;expire=1432754244&amp;sparams=requiressl,shardbypass,cmbypass,id,itag,source,ip,ipbits,expire&amp;signature=691BAE82BA1FE4D4084DCCB9C1EBDA134AF4312B.A789605BB07CC90CBAE60AD24A9631022835B6DC&amp;key=ck2&amp;mm=30&amp;ms=nxu&amp;mt=1432750367&amp;mv=u&amp;nh=IgpwcjAxLmZyYTAzKgkxMjcuMC4wLjE&amp;pl=23&amp;cpn=jL7UCwA73YsFunXs&amp;c=WEB&amp;cver=html5"></video>

Edit:

I just tested this but it does not work since the src does not directly point towards a video file but rather many POST parameters which google works on to create the video when embedded in an iframe. Can you download the video file?

Answer 2

There is a brutal way to do this:

<div class="iframe_hide_poop">
<div class="magic"></div>
<iframe src="...."></iframe>

</div>

then the css part is:

.iframe_hide_poop{
 position:relative;
//add your stuff
}
.iframe_hide_poop iframe{
  position:relative; 
  //add your stuff
}
.magic{
  position:absolute;
  width:80px; 
  height:80px;
  top:20px; //adjust the value
  right:20px;//adjust the value
  background-color:#000;
}

In this way, there will be an 80X80 black area "above" the pop-up button preventing users seeing pop-up, or you can change the width of the .magic to be 100%, it will show as a thin banner if you think it looks better.