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

Stop angular material css styles from affecting neighboring components

Currently, I have overridden the angular material style in my global SCSS style as follows: .mat-form-field-infix{ padding: 0.5em 0 0.5em 0 !important; } However, I now need to apply a different padding to the same element in my component for addition ...

cssangularsassangular-material

Javascript: Harnessing Textbox Arrays for Improved Functionality

Check out the form displayed below. <form id="upload_form" enctype="multipart/form-data" method="post"> <input type="text" name="name[]" id="name"><br> <input type="text" name="name[]" id="name"><br> <input type="fil ...

javascripthtml

Arrange the divs at the top and bottom of a Bootstrap 5 column

I am working with a Bootstrap 5 row that contains multiple columns. Each column consists of an image and a paragraph. Since the images have varying heights, I am trying to align everything by: setting the child div to have a height of 100% using h-100 al ...

csstwitter-bootstrapbootstrap-5

Pass the array data stored in React state over to Node/Express

I have been exploring ways to transfer an array from my react front end to my node/express back end. Initially, I attempted the following method. In React: saveUpdates = (clickEvent) => { var list = []; var length = this.props.title.length; ...

javascriptarraysnode.jsreactjsexpress

Working with HTML5 canvas to draw multiple images

Here is the code I'm working with: http://jsfiddle.net/zyR9K/4/ var Enemies = { x: 25, y: 25, width: 20, height: 30, speed: 0.5, color: "#000", draw: function () { canvas.fillStyle = ...

javascriptjqueryhtml

Having difficulty sending data to a controller through AJAX in Code Igniter. Can anyone help troubleshoot

I recently started learning PHP OOP and am currently using the Code Igniter framework. I encountered some difficulties in sending data to the controller using AJAX, so I attempted a simple test to check if AJAX was functioning properly, but unfortunately, ...

javascriptphpjqueryajaxcodeigniter

CSS Transition - Troubleshooting my malfunctioning code

I seem to be facing a simple issue with my code. The following snippet does not work in Chrome or Firefox, as the transition property is not working properly. Instead of smoothly transitioning from blue to red when hovered over, the element immediately swi ...

csscss-transitions

Is it better to overwrite past values in CSS or to duplicate rules?

Which one of these CSS code practices is considered better? A - concise and rewritten: @media only screen and (min-width: 480px) and (max-width: 960px) { h1, h2, .header, .widget, .copyright { position: static; width: 100%; height: auto; ...

csscode-cleanup

Rearrange items in a display: contents wrapper using CSS Grid

I'm having trouble positioning descendants in a root grid while they are enclosed in a container with display: contents. The issue I am facing is that one element is not being correctly placed within the grid: .wrapper { width: 80ch; margin: a ...

htmlcsscss-grid

Sending the value of "username" between two components within Angular 2

I have a good understanding of nesting child components within parent components in Angular 2, but I'm a bit unclear on how to pass a single value from one component to another. In my scenario, I need to pass a username from a login component to a cha ...

javascriptangulartypescriptsocket.io

I need help with importing CSS in Vue.js

When working with the Vue package, I have a need to import a CSS file directly into the index.html file. Currently, the 'index.html' file mounts #app > 'App.vue', which then mounts Todo.vue using the router. Any assistance on how t ...

cssvue.jsimportrouter

A beginner's guide to crafting a knex query with MySQL language

Within MySQL Workbench, I currently have the following code: USE my_db; SELECT transactions.created_at, price FROM transactions JOIN transactions_items ON transactions.id = transactions_items.transaction_id JOIN store_items ...

javascriptmysqlknex.js

Utilize a traditional JavaScript class to instantiate an object in Vue.js

Is it possible to integrate a standard JavaScript class into a Vue.js component without needing anything static? If not, I am open to switching to React or Angular. Are they more suitable than Vue.js for code reusability? Test.js file: class Test { co ...

javascriptvue.jsclass

Convert HTML element to a JSON object

Here is an example of an HTML element: <div class='myparent'> <div> <div class="pdp-product-price"> <span> 650 rupees</span> <div class="origin-block"> <sp ...

javascriptjson

When the nav-element is clicked, it will load the new content/file.php into the div with the id of "include."

Seeking the most efficient method to load content from a php file into a designated div on my webpage, prioritizing speed, minimal performance requirements, and ease of implementation. Unsure whether it's preferable to utilize php or javascript for t ...

javascriptphpjqueryhtmlcss

Encountering 'undefined' issue with find operation in mongoDB

Seeking assistance to utilize all available values in my code. bericht.find({ room: room }).toArray(function(err, docs) { assert.equal(err, null); str2 = str2 + docs.message; The function I'm using can successfully loca ...

javascriptmongodbreactjssocket.io

jsTree eliminates the hashtag from the URL

Utilizing a JSON generated jsTree to efficiently navigate through a directory structure has been my recent task. I have successfully implemented the select_node event to capture the path of the selected node as a string and then update the location.hash ...

javascriptjqueryjstree

What is the proper way to update a dropdown value in a React JS component?

Can you please guide me on how to assign a value in a dropdown in react js? I am retrieving the dropdown data after a delay of 3000 milliseconds and then I need to set a value in the dropdown. const App = ({ children }) => { const val = "ax"; const ...

javascriptreactjssemantic-ui-react

Tips for detecting the existence of a different class within a div/ul through jquery or javascript?

This is how I have my unordered list, or "ul" element, styled. As you can observe, there are two classes defined for the ul <ul class="nav-second-level collapse"> </ul> There might be an additional class added to the same ul like so: <u ...

javascriptjqueryhtml

Regular expression for extracting all JavaScript class names and storing them in an array

In my quest to create a straightforward regex, I aim to spot all class names within a file. The catch is that it should identify them even if there's no space preceding the curly bracket. For example: class newClass {...} This should result in ...

javascriptnode.jsregex