Display Height Issue: CMS / Rich Text Element w/Embed - Google Drive File

I’m using an embed code within a rich text element to display a PDF from Google Drive. It displays perfectly on a normal page, but does not fill the page vertically within a Collection page.

Take a look at the PDF Embeds Template Collection page.

Here’s my share link.

I have a feeling this has a very simple solution. Many thanks for any help!

Hey again Zac,

You could do something like this in a separate embed on the page.

<style>
.w-richtext .w-iframe {
    height: 100%;
}
</style>

However putting your iframe inside of a richtext element is probably unnecessary and a bit fragile. I’d probably just use a standalone embed.

Thanks, @memetican. I’d like to do it the right way. I tried this code and it still remains the same height:

<object data=
"https://drive.google.com/file/d/1TFFZLLiQT0Nkec3WPMKzBRdm_pb5a_fS/preview" 
        type="video/mp4" width="100%" height="100%">
    </object>

I think you want an IFRAME. And if it’s a PDF… well you generally wouldn’t have a mime type attribute on an IFRAME anyway.

It was originally in an iframe. How can I bind an embed element with a CMS collection without the rich text element?

It seems to be embedding properly, there just doesn’t seem to be anything I can do about setting the height to 100%.

Just store the URL itself in the CMS collection, then in the Embed you have your IFRAME code. Use Add Field to put your link in the src field.

1 Like

I knew I was overcomplicating it. @memetican, thanks again for your generous and swift support. :pray:t3::fist_right:t3::fist_left:t3:

1 Like