Add Css To Iframe Page?

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: &l

Solution 1:

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

<videoclass="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?

Solution 2:

There is a brutal way to do this:

<divclass="iframe_hide_poop"><divclass="magic"></div><iframesrc="...."></iframe></div>

then the css part is:

.iframe_hide_poop{
 position:relative;
//add your stuff
}
.iframe_hide_poopiframe{
  position:relative; 
  //add your stuff
}
.magic{
  position:absolute;
  width:80px; 
  height:80px;
  top:20px; //adjust the valueright:20px;//adjust the valuebackground-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.