1

I used several methods to add style to the body of an iframe document and it works, the problem is when I put a youtube video in the iframe src, in that case it doesn't make me add style to the iframe document. Is youtube blocking the addition? My code is:

<body>

    <iframe id="if" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1" width="500px" height="500px"></iframe>   
    
</div>

<script>
    
    $("#if").on("load", function() {
    let head = $("#if").contents().find("head");
    let css = "<style type='text/css'> body { background-color: red; }</style>";
    $(head).append(css);
});


</script>
MicheleC
  • 13
  • 4
  • Have you looked to see what jquery is giving you as head? According to jquery documentation “The contents() method can also access the HTML of an iframe, if it is in the same domain” and yours isn’t. – A Haworth Nov 20 '20 at 22:19
  • https://stackoverflow.com/questions/4724904/how-to-change-style-of-iframe-content-cross-domain – FSDford Nov 20 '20 at 23:47

1 Answers1

1

Based on what I have read on lifewire (https://www.lifewire.com/iframes-and-css-3468669) and red stapler (https://redstapler.co/how-to-apply-css-to-iframe/) it isn't possible to do this with this method unless the iframe is not cross-domain. It says on red stapler

This method does not work with cross domain content. You’ll need to set appropriate CORS header but it’s not recommended due to security risks.

Solution 1: It might be possible to use another hosting site (like Vimeo), or you can host the video yourself. You can use a video download to download the video and reupload it to your site (I would definitely credit the author of the video and provide a link to the channel if it is not your video though).

Solution 2: Another option is to just shrink the iframe so that there are no black borders and apply padding, as you can see here: https://codepen.io/bobsfriend/pen/PoGqKXp.

#if {
  background-color: red;
  padding: 5em;
}
<iframe id="if" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1" width="500px" height="281px"></iframe>

Solution 3: You could also just copy and paste all the code from the iframe and the iframe's style sheets into your own code and then adjust that code, though that is probably plagiarism and therefore illegal.

bobsfriend12
  • 418
  • 4
  • 8