Usage of cryptpad's media-tag script to embed pdf file in websites

JerryBundler

Hi everybody, I'm happily using crypt pad. Today I wanted to embed some pdf files that I have stored in my cryptpad drive into a website that I'm designing with wordpress. I tried to use the code provided by cryptpad:

<script src="https://cryptpad.fr/common/media-tag-nacl.min.js"></script>
<media-tag src="https://files.cryptpad.fr/blob/97/97ecfcf8b63e5d0f82a25def414cb4f40313f5893bb8d59c" data-crypto-key="cryptpad:/gOQNACgcodYTnLxYj395wLlrL8BTNKNg9HRHTGp3KM="></media-tag>

I'm inserting this code into a custom html box in the Gutenberg block editor of wordpress.
This works in principle, the file is nicely embedded in the wordpress page.
However the height of the embed box is quite low, see the attached screenshot.

Is there a possibility to adjust the height of the embed box, such that the whole pdf is displayed at once?
I would be quite thankful for helpful answers!
Image description

David

Hello,
Thank you for this interesting use-case. When embedding media-tag elements on CryptPad, at least in markdown, we have styles that set the height. You do not have these styles on your site hence the default sizing. You should add something like this to the custom CSS of your WordPress site:

media-tag > iframe[src$=".pdf"] {
    height: 80vh;
}

see how this is set for the markdown preview in CryptPad for more details (please bear in mind CryptPad styles are written in LESS CSS)

I hope this helps!

JerryBundler

Thank you for your reply and explanation.
I have now installed a plugin in the wordpress to insert custom LESS. Then I have inserted your code snippet as custom LESS. Unfortunately it just has no effect on the appearance of the embed box. Hmm.
I think I have to find a workaround, as I'm not experienced enough in programming.