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:
- Visit this website: https://www.wikihow.com/Embed-a-YouTube-Video-on-Your-Website
- Scroll down to the youtube video they have under the Community Q&A, right click/inspect element anywhere outside of the video.
- Click on the video thumbnail by using "Pick an element from the page" tool(top left corner of the dev tools")
- 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.
- 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.
- 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.