Customize YouTube iframe styles in Angular 4+ with TypeScript

Has anyone been successful in overriding the style of an embedded YouTube iframe using Angular 4+ with TypeScript?

I've attempted to override a CSS class of the embed iframe, but have not had any luck.

Here is the URL to YouTube's stylesheet:

https://www.youtube.com/yts/cssbin/www-player-webp-vflFb1ac9.css

The specific class I am trying to override on my website is:

.ytp-cued-thumbnail-overlay-image{
  background-size: 100%; //instead for background-size: cover;
}

I am attempting this because the thumbnail overlay image does not resize properly on mobile view.

**** Update ****: For instance:

  1. Visit this site:
  2. Scroll down to the YouTube video under Community Q&A, right click/inspect element anywhere outside of the video.
  3. Click on the video thumbnail by using "Pick an element from the page" tool (top left corner of dev tools).
  4. You will see the contents inside the iframe tag and the div with the class ".ytp-cued-thumbnail-overlay-image" with the background-size: cover; attribute.
  5. Select mobile view (next to Pick an element from the page) or resize the browser to make it mobile size.
  6. In my case, the thumbnail won't resize properly and gets cut off on both sides, with mobile view, so my solution was to change "background-size: cover to 100% !important;", but I could only do this via browser dev tools, not in the source code with CSS. Hence, the question about another approach using TypeScript.

== EDIT ==: I have created a small project for this issue, where the link tag seems to be added to the iframe, but has no effect. Also, check out the console area.

Online code link:

https://stackblitz.com/edit/angular-kvmp33?file=src%2Fapp%2Fapp.component.ts

Thank you for all the suggestions and assistance. I will share my solution if I find one, hoping it helps others facing the same issue. Thanks!

P.S.: This is my first post, apologies if anything is unclear or missing.

javascriptcssangulartypescriptangular5

Answer №1

If you haven't tested it yet, but if all the content is within your DOM, you can simply edit it with CSS. Open up Chrome (or any browser) inspector and try to change the classes you want. If that works, just add the CSS with the !important tag because YouTube's CSS may override anything else in your DOM. Therefore, using !important is recommended.

<iframe id="youtube_frame">
...
</iframe>

#youtube_frame .ytp-cued-thumbnail-overlay-image{
  background-size: 100% !important;
}

Note: Remember that by setting it as 100%, the top-level element or any above it must have a fixed size... try setting a fixed background-size as 400px just to test if it works

EDIT: It might be a good idea to wait for the DOM to load the iframe before attempting to manipulate the element with CSS. I have tested the code below, but keep in mind that this is a quick solution and you should monitor the iframe to ensure it is fully loaded before adding your class

setTimeout(() => {
  let yt = document.getElementsByClassName('ytp-cued-thumbnail-overlay-image')[0];
  console.log(yt);
  yt.setAttribute("style", "background-size: 0");
}, 3000)

Answer №2

If your code is structured like this:

<link href="./my.css" rel="stylesheet" />

...

<iframe src="..."></iframe>

It's important to note that if you have defined a class in "my.css", it may not work as expected when applied to the iframe since the iframe loads another page within the current one. This means that the loaded page will only use the CSS referenced within its own content. To override the CSS of the loaded page, you'll need to insert your styles directly into the page being loaded by the iframe. More information on how to do this can be found here.

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

Using sinon.js version 1.10, jQuery version 2.1, and making synchronous requests

I have been attempting to simulate a server using sinon.js and calling it with jQuery.ajax, but I am facing issues getting it to work. Here is the code snippet: $(function() { var server = sinon.fakeServer.create(); server.respondWith('POST&apo ...

javascriptjqueryajaxsinon

How to automatically select the first item in a populated dropdown list using Vue JS

My HTML select element is populated with options from a server, but when using v-model, it initially selects an empty option instead of the first one. I came across a solution on a post which suggests selecting the first option manually, but since the dat ...

javascripthtmlvue.jsvuejs2

How to customize the color of the clock symbol in a MUI TextField set to type 'time'

<TextField id="endTime" label="End Time" onChange={onEndTimeChange} type="time" defaultValue="16:00" className={classes.textField} /> By using the attribute 'type="time"', an ic ...

cssreactjsmaterial-ui

Creating a stylish navigation bar with custom components using Material UI and React

I've been experimenting with the BottomNavigation component from Material UI, but instead of using labels and text, I want to incorporate custom-made ImageButton components. Here's the code snippet from Material UI: import React from 'rea ...

javascriptreactjsmaterial-ui

Expanding <a> element to cover the entire <li> container

Take a look at this straightforward menu layout: <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> I'm looking to expand the <a> element so that it ...

htmlcssxhtml

Using Angular 2 to assign unique ids to checkbox values

Is there a way to retrieve the value of a checkbox in Angular 2 without needing an additional Boolean variable? I am trying to toggle the enabled/disabled state of an input field based on the selection of a checkbox. While I know this can be accomplished ...

htmlangular

The medium-zoom feature is currently experiencing issues with functionality within Angular version 13

I've been attempting to incorporate medium-zoom functionality into my project using https://www.npmjs.com/package/medium-zoom Here are the steps I took: ng new medium_zoom_test (Angular 13) with routing & css npm install medium-zoom The image is ...

javascriptangular

Acquiring an icon of a program using its handle

I am looking for a way to extract a program's icon from its handle, which I acquired using User32.dll with EnumWindow/FindWindow. While I am aware of ExtractAssociatedIcon, it seems to work from a file instead of a handle. My question is how can I con ...

javascriptc#node.jswindowsnode-ffi

tips on assigning a unique ID to an item in a firebase database collection

My code is structured like this: const userCollectionRef = collection(db, 'users'); Then I add data using the following method : const addInfoToDataBase = async () => { checkLike(); await addDoc(userCollectionRef, { likePost: us ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

unable to successfully complete parameter in angular 2

After receiving data from the API, I am using the subscribe method to execute lines of code. Below is the code snippet: this.attRecService.getAgendaData(moment(this.viewDate).format('YYYY-MM')).subscribe( resp => { this.ag ...

angulartypescriptasynchronoussubscription

CSS shimmer effect does not smoothly transition between borders

Currently, I'm diving into a tutorial on YouTube that teaches how to craft a CSS Glowing Border Animation After putting in the effort to replicate the animation, I noticed a glitch that's been bothering me. It seems like there's an abrupt s ...

htmlcss

Troubleshooting issues with NodeJS and Express authentication middleware functionality

I am currently working on implementing the isUserAuthenticated function to run on every server request. This function is required in the app.js file and utilized using app.use(authenticate.isUserAuthenticated). In my project, there is an /authenticate rou ...

javascriptnode.jsexpressauthenticationsaml

How come the use of a timeout causes the this variable to seemingly lose its reference?

What is the reason why this: myelements.mouseenter(function() { clearTimeout(globaltimeoutvar); globaltimeoutvar = setTimeout(function() { var index = myelements.index(this); console.log(index); // -1 }, 150); }); Returns -1, while this: m ...

javascriptjquerysettimeout

Token authentication in Angular 4

I need to retrieve data from a URL after posting the username and password. However, I encounter an error when trying to get the token using the GET method. The error message is: : Response for preflight has invalid HTTP status code 405. @Component({ ...

angulartypescriptauthenticationtoken

What is the best approach to develop a React Component Library adorned with Tailwind CSS and enable the main project to easily customize its theme settings?

Currently, I am in the process of developing an internal component library that utilizes Tailwind for styling. However, a question has arisen regarding how the consuming project can incorporate its own unique styles to these components. Although I have th ...

reactjstypescriptuser-interfacenpmtailwind-css

Utilize a for loop within a query to showcase a modal popup

I have a specific requirement: I want to display a modal popup window based on a for loop using jQuery. I have attempted the following approach, where I want the modal popup to be displayed based on the value of a flag. For example, if the Flag value is 3, ...

javascriptjquery

Obtaining the category value within a slot of the Vuetify calendar

I am struggling to implement hover functionality in the categories view of Vuetify calendar within the body section (slot day-body). When I try to add hover functionality, the entire row ends up being affected by the hover effect, even though I only want i ...

javascriptvue.jsvuejs2vue-componentvuetify.js

What is the best way to adjust the maximum width of Reddit's embedded comment iframe?

Reddit provides a code that can be embedded to display their comments on a website, As an example: <div class="reddit-embed" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="false" data-embed-uuid="24a3e666-f855-4664 ...

javascripthtmlcssiframereddit

What measures do websites such as yelp and urbandictionary implement to avoid multiple votes from unregistered users?

It is interesting to note that on urbandictionary, you do not need to be logged in to upvote a definition. For example, if you visit and upvote the first word, it will record your vote. Even if you open an incognito window and try to upvote again, or use ...

javascriptjquery

Using Angular 2, you can pass an object as a parameter to a function

Is there a way to pass an object as a parameter in the DOM on this forum? Within my HTML code, I have the following: <div class="list-items"> <ul> <li *ngFor="let i of item"> <span (click)="onAdd({{newUser.us ...

typescriptangular