Hello there, this is an issue that I already contacted support about and they pointed me to the forum so hopefully someone here from the community may be able to help.
I’m building a blog site in Webflow CMS that currently lives in Wordpress.
In the CMS collection for blog posts, the post body is set as a Rich Text field (Rich text | Webflow University).
One of the posts has several Instagram posts embedded throughout and I’m having an issue with setting the height for each one. This works natively in Wordpress with no issues.
To embed the Instagram post, I insert the URL in the Video element field and this works.
However, on the front-end the post gets cut-off. I’ve set up a style guide for the project and there is only one figure element to style for all video types, so really no way to style an Instagram embed separately there and in the front-end there are no unique CSS classes to target for a video figure element that’s not, say a YouTube video, but it’s an Instagram single post embed.
Also, it’s not an option to style a Figure → Media element like you can style a Figure → Image element inside the Rich Text field in the Styling guide.
One very hacky workaround I have found at the moment is with JavaScript and jQuery where I search the post for any iFrames that contain “instagram.com” in the src attribute and then add a CSS class to the parent Figure element that sets the height to 100vh, but this is still not working quite right as different embeds have different heights so there is white space below them everywhere.
Anyone know of a solution to this? Maybe a JavaScript solution that would work?
Here is the post in question: https://mimeo-photos-new.webflow.io/blog/best-instagram-hashtags-for-photographers
The JavaScript:
<script>
$(window).on('load', function(){
$('iframe[src^="https://www.instagram.com"]').each(function(){
$( this ).closest("figure").addClass( "ig-embed-vh" );
$("figure:nth-of-type(2)").addClass( "ig-embed-57vh" );
});
});
</script>
Thanks!
Taulant
Here is my public share link: Project Read-Only Link