Video Hero does not switch on router switch

🙋Get Help
1

Hi All,

I am experiencing some weird behavior on my video hero’s on my sub content pages.

I have the videos actually embedded on Wordpress itself and have it coming through form HTML2React content.rendered.

Current Behavior:
When I navigate from Home > Property Owners, the correct hero video loads on Property Owners, but when I navigate from Property Owners > Renters, the video does not switch to the renters Hero video unless I refresh the page. Same thing the other way around.

Expected Behavior:
No matter which way I navigate to Property Owners or Renters, the correct video hero should load.

Here’s a repo of my code. This code lies in the Sub.js template:

Here’s what the live pages look like, notice when you click from home to property owners to renters, and home to renters to property owners, the video hero doesn’t switch:

And here is what the actual Wordpress page looks like

Do I have to prefetch or do some beforeSSR magic on this? I don’t know how to approach this.

Thanks!

4

Hey @chayce.solchaga :wave:

I think I found a way to solve this.

The problem is that React thinks the <video> element has not changed and so React doesn’t re-render it again. The <source> element nested actually changes but that doesn’t trigger the render of <video> so it remains the same.

…/sub/property-owners/

image
image1490×198 34.9 KB

…/sub/for-renters/

image
image1490×198 34.4 KB

To force the <video> rerender you can use a processor that changes the key property for that element depending on the link you are currently in.

const video = {
  name: "video",
  priority: 20,
  // Match any `<video>` element.
  test: ({ component }) => component === "video",
  processor: ({ node, state }) => {
    return {
      // Add the key prop to `props`.
      props: { ...node.props, key: state.router.link },
    };
  },
};

export default video;

Hope it helps! :blush:

2 Likes
6

@David I’ll give this a try now! Thanks for the tip! I’ll let you know how it turns out.