[Resolved] Embed on Toolset index page 'takes over'

[Author]

Posts

[chrisL-13]

>> I am trying to:
Build an index page template to display a Toolset type called 'Podcasts' that displays a list of posts that include embedded Soundcloud files

>> Link to a page where the issue can be seen:
hidden link

>> I expected to see:
My template, with the hero image of the headphones on a yellow background

>> Instead, I got:
The embed for one of the 'Podcast' posts overlaying the entire page. If I go in and edit the content template, the expected layout appears on save. But a day or hours later if I review the page, the problem will recur.

Images attached are what the page should look like, what the page looks like when the first embed 'takes over' and the 'Listen more' view that is displaying the 'renegade' embed.

[Shane]

Hi Chris,

Thank you for getting in touch.

I took a look at the page you've sent the link for as well as the "Podcast Index" template and it appears fine.

I'm seeing the earphones with the yellow background rather than the podcast video as the banner.

From my perspective it is displaying fine. Perhaps i'm looking in the wrong place? If the issue should re-occur can you let me know so that I can have a look immediately.

Thanks,
Shane

[chrisL-13]

I'm sure you're looking in the right place, Shane. I can't seem to break it right now. We're showing it to the client tomorrow 11am GMT so with any luck it will hold til then. Then I will try again. Thanks for checking in.

[Shane]

HI Chris,

This is quite a strange one, after the demo to the client and the issue re-occurs I can happily have a look again for you. I'll keep this ticket open until you provide an update on the issue.

Thanks,
Shane

[Shane]

Hi Chris,

Checking in for an update on this one. Has the issue re-occurred? Or is it holding stable for now.

Please let me know.
Thanks,
Shane

[chrisL-13]

Wow. You must be psychic. The page is exhibiting the problem condition now.

hidden link

Just prior to you asking I was working on the podcast-single content template to change the block that displays the sub-navigation.

Have a look.

[Shane]

Hi Chris,

I'm trying to have a look but it seems the site is now on a private server which requires a login before I can view the site.

Can you provide the credentials for this as well. The private fields have been enabled.

Thanks,
Shane

[chrisL-13]

Sent them privately.

[Shane]

Hi Chris,

I found the reason behind the issue. Its caused by your css below.

/* Listen more view on audio index page */
div#wpv-view-layout-1248, div#wpv-view-layout-4785-TCPID1562 {margin-bottom: 6rem}
div#wpv-view-layout-1248 .tb-grid-column, div#wpv-view-layout-4785-TCPID1562 .tb-grid-column {background-color: #fafafa}
div#wpv-view-layout-1248 .tb-field.included-audio-embed-container, div#wpv-view-layout-4785-TCPID1562 figure {position: relative; padding-bottom: 62.5%; /* hero image ratio */ height: 0; overflow: hidden;}
div#wpv-view-layout-1248 .tb-field iframe, div#wpv-view-layout-4785-TCPID1562 figure img {position: absolute; top: 0; left: 0; object-fit: cover; height: 100%; width: 100%;}
div#wpv-view-layout-1248 h4.tb-heading, div#wpv-view-layout-4785-TCPID1562 h4.tb-heading {font: 1.73rem/2.26rem 'Bely Bold';}
div#wpv-view-layout-1248 h3.tb-heading, div#wpv-view-layout-4785-TCPID1562 h3.tb-heading {font: 2.26rem/2.53rem 'Bely Regular';}
div#wpv-view-layout-1248 .included-post-date {font: 1.067rem/1.4rem 'Bely Regular';}
div#wpv-view-layout-1248 .included-article-blurb, div#wpv-view-layout-4785-TCPID1562 p {font: 1.4rem/1.73rem 'Bely Regular';}

If I was to be more specific I would believe the issue is mainly being caused by the position settings that you've applied to the Iframe since its the only offender.

div#wpv-view-layout-1248 .tb-field iframe, div#wpv-view-layout-4785-TCPID1562 figure img {position: absolute; top: 0; left: 0; object-fit: cover; height: 100%; width: 100%;}

You've set the position to absolute and applied top 0 and left 0 to the iframe which will cause it to be in a fixed position at the top of the page. Mainly removing the position: absolute will resolve the issue.

Thanks,
Shane

[chrisL-13]

My issue is resolved now. Thank you! Amazing support as always.