How can I customize the appearance of an iframe using CSS?

Simply put, I've uploaded a video to Google Drive that I want to embed on my website. The embed code I got from the shared-video page for the video is:

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

This iframe leads to this URL: https://drive.google.com/file/d/0B8DK7pele_HjWUR6Ym9KNFU5YTQ/preview

Upon visiting the URL, I see a full-screen view with a video player similar to YouTube and an annoying 'Pop out' option at the top-right of the page. I do not want users to navigate to the Google Drive shared-video page (i.e. https://drive.google.com/file/d/0B8DK7pele_HjWUR6Ym9KNFU5YTQ/view). I just want to remove the 'Pop out' arrow symbol.

I tried to edit the code using CSS to hide the 'Pop out' button:

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

This worked in preventing the 'Pop out' button from displaying and redirected to playing the video instead. The challenge now is finding a way to apply this CSS to the iframe directly.

I have attempted to use various programming languages such as HTML, CSS, JavaScript, and PHP but haven't found success. Is there any way to remove the 'Pop out' arrow within the iframe through coding? Any guidance or workaround would be appreciated as I'm not experienced in programming.

Notes: - The video used here is only for illustrative purposes. - You can view my test page at: 

http://freemedia.x10.mx/index.html

javascriptjqueryhtmlcssiframe

Answer №1

Have you attempted to directly include the video using HTML5's <video> tag (which is essentially what is inside your iframe)?

<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 have just tested this method, but unfortunately, it didn't work as expected. The issue lies in the fact that the src does not directly link to a video file, but rather consists of multiple POST parameters which Google processes to generate the video when embedded within an iframe. Is there any way for you to download the actual video file instead?

Answer №2

If you're looking for a more aggressive approach:

<div class="iframe_conceal_odor">
<div class="sorcery"></div>
<iframe src="...."></iframe>

</div>

Then, when it comes to the styling aspect:

.iframe_conceal_odor{
 position:relative;
//customize as needed
}
.iframe_conceal_odor iframe{
  position:relative; 
  //customize as needed
}
.sorcery{
  position:absolute;
  width:80px; 
  height:80px;
  top:20px; //adjust accordingly
  right:20px;//adjust accordingly
  background-color:#000;
}

By utilizing this method, an 80X80 black section will be placed "above" the pop-up button, effectively concealing it from users view. Alternatively, you can modify the width of the .sorcery element to span 100% of the screen for a sleeker appearance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize AdWords Scripts/Javascript to display array objects on separate rows within a spreadsheet

I am currently facing some difficulties in figuring out how to display objects from an Array on separate rows within a spreadsheet using Google AdWords. var SPREADSHEET_URL = "xxxx"; function main(){ var spreadsheet = SpreadsheetApp.openByUrl(SPREADSH ...

javascriptarraysprintingrowsgoogle-ads-api

As I go through the database, I notice that my div model functions correctly for the initial record but does not work for any subsequent ones

I came across a model on w3 schools that fits my requirements, but I am facing an issue where the model only works for the first result when looping through my database. It's likely related to the JavaScript code, but I lack experience in this area. C ...

javascriptphphtmlcssloops

Combining column values with AngularJS

What is the best way to merge column values in AngularJS? ...

javascriptangularjs

The Jquery navigation and image display features are experiencing technical difficulties in Internet Explorer

My website is currently in the development stage and functions well on all browsers except for IE10. Interestingly, both the menu bar and photo gallery, which rely on Jquery, are not functioning properly in IE10. Below is the code snippet: <script ty ...

javascriptjqueryhtmlcssinternet-explorer

Steps for displaying the output of a post request in printing

I am currently working on creating a basic search bar functionality for daycares based on user input. I am utilizing a post request to an API and receiving back a list of daycares that match the input. Below is the code snippet: <template> <div ...

javascripthtmlvue.jsvuejs2vue-component

Using Node.js to leverage the async library for concurrently executing two tasks, then proceeding to start the final task after the first two have completed

Challenge Looking to run two tasks concurrently and then execute a third task after both are completed. I have been using the async library, which is functional but wondering if there is a more optimized approach. Tasks Task 1: readFileNames: Scans a di ...

javascriptnode.jsasync.js

What is the best way to retrieve AJAX data in Django views?

I am currently facing difficulties with retrieving data from an AJAX call in my Django views using the GET method. Unfortunately, I am encountering issues accessing the data within my views and the console.log statements are not showing any output. As a ne ...

jquerydjangoajaxdjango-views

Issue with clicking a button in Selenium using JavaScript for automation

I'm encountering an issue where Selenium is detecting an element as disabled, despite it being enabled. To work around this, I am attempting to click on the element using JavaScript with the following code snippet: IWebElement button = driver.FindEl ...

javascriptselenium-webdriver

Is it possible to bypass the standard syntax and manipulate geometry buffers directly in three.js in order to achieve improved performance?

Embarking on a creative journey into the realm of geometry generation and manipulation, I am eager to explore intricate and large-scale projects. While I am familiar with the conventional methods of achieving this, as demonstrated in the informative respon ...

javascriptthree.js

Is it possible to supersede CSS styling using a class name in React?

My <li> tag in my .css file has the following style: li { padding: 15px; background-color: #32383d; transition: 0.4s; border-bottom: 1.5px solid #464e53; color: #6b6d6d; font-family: "Poppins", Arial, sans-serif; cursor: pointer; } The issu ...

cssreactjs

Sending data from JavaScript to Jade templatesIs this alright?

Utilizing node.js, express, jade, and socket.io, I have successfully executed JavaScript code on the jade side. However, I am encountering difficulty in generating HTML output from the script block. Based on your feedback, I have updated my question to in ...

javascriptnode.jsexpresssocket.iopug

Using a tpl file with added jquery, even with literal tags, does not function properly

I have been struggling with implementing a jQuery script in my tpl file. Despite using the literal tags, the script is not functioning properly. Can anyone help me figure out what's going wrong? <script type='text/javascript'> {litera ...

phpjquerysmartyprestashop

Dealing with XMLHttpRequest timeout issues in a React.js application

Within my react.js project, I have a function named getData in the Profile class. Here is how it appears: getData() { console.log("inside get data"); var request = new XMLHttpRequest(); request.timeout=1000; request.ontimeout=function () { ...

javascriptreactjsxmlhttprequesttimeoutsettimeout

Why does the getter consistently generate the previous value?

Check out this code snippet: function User(fullName) { this.fullName = fullName; Object.defineProperties(this, { firstName: { get: function () { return fullName.split(" ")[0]; ...

javascriptgetset

Using jQuery Mobile to Recycle a Header and Navigation

I'm a beginner when it comes to jQuery Mobile and I'm struggling to grasp the concept of reusing headers and general navigation. Currently, I have a header with a menu button on the right. When the menu button is clicked, a popup shows up with l ...

jqueryhtmljquery-mobilenavigation

Experiencing difficulties when trying to pan and zoom the data obtained from d3.json within a line chart

I am currently working on developing a trend component that can zoom and pan into data fetched using d3.json. Here is the code I have written so far: <script> var margin = { top: 20, right: 80, bottom: 20, left: 50 }, width = $("#trendc ...

javascriptjsond3.js

Tips for maintaining authentication in a Next.js application with Firebase even when tokens expire or the page is refreshed

Struggling with firebase authentication flows while building an app using firebase and next.js. Everything was going smoothly until I encountered a bug or error. When my computer remains logged in to the app for some time and I refresh the page, it redirec ...

javascriptfirebasefirebase-authenticationnext.js

Tips for accessing the value stored within the parent element

As someone who is new to the world of javascript and typescript, I am currently working on an ionic application that involves fetching a list of values from a database. These values are then stored in an array, which is used to dynamically create ion-items ...

javascripthtmlangularionic-framework

Searching for a column fails to yield any results after altering the value in

Here is a snippet of code that I am working with: <!DOCTYPE HTML> <html lang="en"> <head> <title> Exact matches overview </title> <script type="text/javascript" src="/static/s ...

javascriptjqueryhtmldatatables

How can I modify the fill color of a Cell when hovering over a Bar Chart in Recharts?

I have been rendering the chart in the following manner: <BarChart width={868} height={40} data={data} margin={{top:0, bottom: 10, left:0, right:0}} barSize={5}> <Tooltip labelStyle={{ textAlign: &apo ...

javascriptreactjsd3.jsrecharts