0

Is it possible to override the style from embed iframe from youtube in typescript with angular 4+?

I was trying to override a CSS class of embed iframe, but no luck.

Here is the link to the youtube's stylesheet:

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

The class that I'm trying to override in my website is:

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

The reason why I'm trying to do this is on the mobile view, the thumbnail overlay image isn't resized properly.

**** Update ****: For example:

  1. Visit this website: https://www.wikihow.com/Embed-a-YouTube-Video-on-Your-Website
  2. Scroll down to the youtube video they have under the 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 the dev tools")
  4. You'll see how the contents inside the iframe tag and the div that has the class ".ytp-cued-thumbnail-overlay-image" with the background-size: cover; attribute.
  5. Choose mobile view (it's next to the Pick an element from the page) or you just resize the browser to make it to mobile size.
  6. In my case the thumbnail won't resize property and get cut off on both size, with mobile view and my solution was to change the "background-size: cover to 100% !important;", but I can only be able to do this in the browser dev tools, but not in the source code with CSS(I could be wrong on this). So, that is why I put up a question for another way to do this with TypeScript.

== EDIT ==: I have written a small project for this problem, the link tag seems to be added to the iframe, but it didn't take any effects on it. Also, checkout the console area too.

Link to the online code:

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

I appreciate all the suggestions and the help. I'll post my solution if I find any and hopefully this will help anyone with the same problem. Thanks guys!

P.S.: This is my first post, I apologize if I missed anything or my question is unclear.

Mr. Dang
  • 395
  • 4
  • 14

2 Answers2

1

Never tested, but if the entire content is in ur DOM you just should edit it with css, open Chrome (or any browser) inspector, e try to change the classes you want too, if that works, just add the css with tag !important because i guess youtube css will be the last thing imported at your DOM so his will override anything you use, because of that you should try using !important

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

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

Obs.: Keep in mind you setting it as 100% so the top level element or any above must have fixed size... try setting up fixed background-size as 400px just to check if it work

EDIT: I guess you should wait the DOM loads the iframe and only then try to manipulate the element with CSS, i just tested that code bellow, but keep in mind this is a dirty implementation, you should watch the iframe and check if it is load, and when it is completaly load you add your class

setTimeout(() => {
  let yt = document.getElementsByClassName('ytp-cued-thumbnail-overlay-image')[0];
  console.log(yt);
  yt.setAttribute("style", "background-size: 0");
}, 3000)
Diego Vinícius
  • 1,798
  • 1
  • 10
  • 20
  • thank you for your answer! I have tried this and it didn't have any effect on it. I believed that because the content inside the iframe tag is loading by the [innerHTML] so it's a couple more layers down to get to the .ytp-cued-thumbnails-overlay-image class. I'll update my question with an example link, so you will have a better look at my case. – Mr. Dang Jun 27 '18 at 17:48
  • I tested on Chrome Inspector i was able to manipulate the elemento in DOM, because this video is embed, maybe you should wait the entire iframe loads and only then apply ur css rule... try use a simple setTimeOut event in javascript adding you custom class to the element, check my edit, that worked out for me – Diego Vinícius Jun 28 '18 at 11:38
  • on the example above my video thumb becomes back cuz they wont show anymore, so the code works, you just should put your logic on it, when the page loads if do not print the element, its they didnt load yet, so increase the time... but this is a dirty way to do it – Diego Vinícius Jun 28 '18 at 11:42
  • thank you for your quick response! I have tested this in angular and it didn't do anything with the youtube thumbnail overlay image. I have edited my question with a link to the online code too. – Mr. Dang Jun 29 '18 at 21:00
  • Keep in mind the iframe from youtube take a time to load so you should wait til the iframe fully load to try to manipulate it – Diego Vinícius Jul 02 '18 at 19:10
0

Assuming that you code looks like :

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

...

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

If you defined the class you mentioned in "my.css" it can't work as the iframe loads another page in the current one, so the loaded page is only using the CSS referenced in it. If you want to override the CSS of the loaded page, you have to insert yours in the page loaded by the iframe as described here.

ssougnez
  • 4,202
  • 9
  • 36
  • 65
  • I've researched quite a lot about this and I tried this one first out of the box, but I couldn't change/override the css from iframe. I'll update my question with steps to get to this problem. Thank you! – Mr. Dang Jun 27 '18 at 17:50