Single Layout with certain "Raw Content" not working after update

[striata]

One of my single layouts does not load in the builder after the update. It is stuck on the loading spinner (the three vertical bars) forever. I have now narrowed it down to a Raw Content element that is part of my layout. As soon as I delete the code inside of the raw content element, it does work. This is what is in the raw element:

  <div class="video-container">
    <iframe src="https://www.youtube-nocookie.com/embed/{{dc:post:meta key="jc_video-recording"}}?loop=1&controls=1&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
  </div>

It worked in Pro v5, it does not work in Pro v6.

When I freshly insert the code, it does work, it shows the correct preview. I can save it, and on the front end, it shows the correct video on each of the posts where this layout is assigned. On the backend, however, I cannot load the preview anymore when the code is in there, and I cannot switch between different posts in the preview (switching will try and load the preview “from scratch”, and loading doesn’t work). The builder does load the side pane with the outline, the inspector, etc, so I can go in there and delete the code, save the layout, select a preview. Then the Preview shows again. With this I was able to test various scenarios, but none of them helped:

• changing the double-quotes within the {{dc...}} field to single quotes (same non-loading behavior as with double quotes)
• taking out the {{dc...}} field completely and replacing it with the value of one of the posts (same non-loading behavior as with {{dc...}} field, but of course each post on the front end will now show the same hardcoded video)
• removing the <div> around the <iframe>
• Instead of using the Raw Content element, I tried the Video element, pasting the <iframe> code from above into the “Embed” field of the Video element. Same behavior.

[tristup]

Hi @striata,

Thanks for reaching out.
I have checked by embedding the Youtube video in my local environment with the Raw Content element and it worked perfectly fine. I would suggest you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password
– Specific page where you are having this problem.

To create a secure note, click the key icon underneath any of your posts.

Alternatively, you use the Text element and check if that works for you.

Thanks

[striata]

To add, the Chrome Dev console shows the following error message in the console when I try to load the preview of the page inside the buiulder (when the <iframe>code is present):

Further experiments:

• Using a Text Elelemnt made no diffeence.
• www.youtube.com vs www.youtube-nocookie.com did not make any difference
• using the embed code without any fancy options (only <iframe src="https://www.youtube-nocookie.com/embed/{{dc:post:meta key="jc_video-recording"}}" ></iframe>) did not make a difference
• Using the following “naked” iframe code: <div class="video-container"> <iframe></iframe> </div>. This does NOT cause any problems.

Log-in info in secure note.

[ruenel]

Hey There,

Actually this will work:

@striata

At the moment, I have made it work on this page:

See the link in the secure note.

Thanks.

[striata]

Dear @ruenel,
There is no difference from before. Your screenshot shows how it looks when the code is freshly inserted. It works, as I have already described. But have you tried switching the preview in the builder, from one of the posts to another (as described in my secure note), after you have inserted the iframe code and saved the layout? The builder preview does then not load anymore. Your link in your secure note points to the frontend; there everything is fine. (and it has been fine before as well, as I have described).
The problem is just that the builder preview will not load.

[striata]

I have now created another single layout on the same site (see secure note from above. The new Single layout is called “Untitled Single Layout”. It only contains Section/Row/Colum/Video Element, with an embedded video from YouTube, nothing else. So, it is basically a static page as far as the content is concerned (It only shows that video), but it is a single layout nevertheless. The preview will not load - same problem as described above.

Here is one more piece of information that might be interesting. The site contained a single post that was not published. The name of the post is “Hallo”; it is at the top of the post list. This was the only post for which, when selected, the preview loaded in the builder. As soon as I have published “Hallo”, the preview for “Hallo” would not load anymore inside the “Untitled Single Layout”. When I switched “Hallo” back to Draft mode, the preview loads again.

Yet another information: The same problem happens when I paste the link to the youtube video in the “Player” version of the Video element instead of the “Embed” Version. However, for a locally hosted video it works fine. It also works fine when I reference a Vimeo video, rather than a YouTube video!

[ruenel]

Hello @striata,

While investigating your issue, I turn OFF the WP Rocket and Complianz plugin first. And then I did the testing.

• See the results in the video I added in the secure note.

Be advised that you are not supposed to use a Youtube link or Vimeo link in the Video element. You should ONLY use direct video file URL like https://example.com/video-filename.mp4 or the Youtube embed code. Since you have used a custom meta field for the Youtube video, you use. the “Embed” as the Type:

The embed code can be like this along with your custom field:
<iframe width="560" height="315" src="https://www.youtube.com/embed/{{dc:post:meta key="jc_video-recording"}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Best Regards.

[striata]

Thank you, ruenel,
this was indeed the issue: Complianz blocks the loading of the preview of the layout in the builder when a YouTiube video was embedded, and when the “YouTube service” checkbox within Complianz is checked. With that checkbox unchecked everything works. However, this setting only affects the preview in the builder, it does not affect how the page displays in the front end.
What I want to say: Whatever Complianz does to the data that the site wants to pull from YouTube, it is not handled graciously by the builder when it wants to generate the preview. Maybe you can post that into your issue tracker, it might be a very simply change to the code. I have already posted the error message from the Chrome console further up in this thread, pointing at a very specific function in the Cornerstone code.
May workaround for now will be to not include YouTube as a Service in Complianz, but that is of course not a real solution.

[ruenel]

Hi @striata,

The Complianz plugin is not fully supported by the theme. At the moment, it is best that you temporarily deactivate the plugin while you are building or editing a page. You can always activate it back once you are ready to go live.

Cheers.

[striata]

Is there a list of related plugins that are supported?

[ruenel]

Hi There,

We only have this documentation:

• https://theme.co/docs/version-compatibility

Thanks.