Style the content of an object/embed - html

Question

I am developing a small web application in which I have an object element (that contains an embed) that I use to display small documents.
The documents can be PDFs or plain text files (.txt) that I get from a web service in the form of a base64 string. Then, to show the content, I update the data and src attributes for the object and embed respectively. The final result would look something like this (simplified):
object {
border: 1px solid #ccc;
width: 300px;
height: 100px;
}
<object type="text/plain" data="data:text/plain;base64,SGVsbG8gV29ybGQh">
<embed type="text/plain" src="data:text/plain;base64,SGVsbG8gV29ybGQh" />
</object>
All the PDFs look ok (the browser loads them using the plugin), but I am facing some trouble with the text files. The content of the .txt is displayed correctly, but the text looks a bit small and I was asked to make it larger.
I tried changing the font size of the object and embed but the content is not affected by it:
object, embed {
font-size: 32px;
}
In Chrome, I saw that the content of the object is a #document that displays the content of the base64 .txt in a pre. So I tried to style the pre, but only the pre tags outside the object tag take them, not the one inside it:
pre {
font-size: 32px;
}
Is it possible to give styles to the content of an object/embed? How could it be done?

Answer 1

Here is a pseudo-solution that worked for me in firefox (locally) and not chrome. The idea is to access the content of the object and append to its head a custom CSS. The issue with this solution is that you will face cross-origin issue in some browser as the object behave like an iframe that includes an external content.
NB: i used the setTimeout to be sure i run the function after the content of the object is loaded
function addCss() {
$('object').contents().find("head").append($("<style type='text/css'>pre{font-size:32px;}</style>"));
}
setTimeout(function(){addCss()},2000);
object {
border: 1px solid #ccc;
width: 300px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<object type="text/plain" data="data:text/plain;base64,SGVsbG8gV29ybGQh">
<embed type="text/plain" src="data:text/plain;base64,SGVsbG8gV29ybGQh" />
</object>
Maybe your problem will be how to avoid this cross-origin issue since the content will be yours and server from the same site.