I have been attempting to add a style tag into the head of an embedded Twitter timeline in order to customize some of the styling. I wrote the CSS and added it within a style tag. My initial idea was to inject this into the iframe using jQuery, but unfortunately, it doesn't seem to be working.
window.setTimeout(function () {
$('#twitter-widget-0')
.contents()
.find('head')
.append(
'<style>div.css-1dbjc4n > section[aria-label="Timeline"] > div{display: grid !important;grid-template-columns: 1fr 1fr 1fr;}.css-1dbjc4n.r-140t1nj.r-qklmqi.r-1cbz2o1 {display: none;}.css-1dbjc4n.r-14lw9ot.r-1ets6dv.r-1q9bdsx.r-rs99b7.r-1udh08x {border: none;}.css-1dbjc4n.r-140t1nj.r-qklmqi {border: solid 1px #e3e6f0;border-radius: 10px;margin: 10px;box-shadow: 0 0.15rem 1.75rem 0 rgb(58 59 69 / 25%) !important;}</style>'
)
$('#twitter-widget-0').css('height', '600px')
console.log("twitter styling bits")
}, 15000);
While it successfully identifies the iframe and its id (as the height changes to 600px), the style tag isn't being added to the head?
Edit
The iframe code is as follows (I haven't included the entire content due to its length as it's the Twitter timeline) and my aim is to simply insert elements into the head tag.
<iframe id="twitter-widget-0" scrolling="no" frameborder="0"
allowtransparency="true" allowfullscreen="true" class="" style="position:
static; visibility: visible; width: 1092px; height: 600px; display: block;
flex-grow: 1;" title="Twitter Timeline" src="...">
<html lang="en" dir="ltr" style="overflow-y: scroll; overscroll-behavior-y:none;">
<head>
...
</head>
</iframe>