Displaying youtube vid in collapsible row

Store Design
1

Hi,

I want to display a youtube video in a collapsible row on my product page.

I use metafields for the url and put the following code in “main-product.liquid”

{% if block.settings.heading == 'Experten testen - Produktvideo' %}
  <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen src="{{ product.metafields.custom.product_page_video_html }}"></iframe>
  </div>

However, on the front end, there is an error message, which says that the domain has resfused the connection:

mjmu_0-1690411412503.png
mjmu_0-1690411412503.png400×230 10.3 KB

Does anyone have an idea how to fix this?

2

Does anyone have any idea how to solve this?

3

I am actually looking for the same solution, I did found this but I did not had the time yet to figure out if it works.

https://www.google.com/search?q=video+in+collapsible+row+shopify&sxsrf=AB5stBiBXJDbJ6F4KzUBq1bYvGyFOYyoZw%3A1691091987985&ei=EwTMZPDTO6aO9u8P_tqS2AY&ved=0ahUKEwiwqefJoMGAAxUmh_0HHX6tBGsQ4dUDCA8&uact=5&oq=video+in+collapsible+row+shopify&gs_lp=Egxnd3Mtd2l6LXNlcnAiIHZpZGVvIGluIGNvbGxhcHNpYmxlIHJvdyBzaG9waWZ5MgUQABiiBDIFEAAYogQyBRAAGKIEMgUQABiiBEj1IlDcA1jtDXABeAGQAQCYAYkBoAGsB6oBAzAuOLgBA8gBAPgBAcICChAAGEcY1gQYsAPCAgUQIRigAcICBxAhGKABGArCAggQIRgWGB4YHeIDBBgAIEGIBgGQBgM&sclient=gws-wiz-serp#fpstate=ive&vld=cid:047a2f9b,vid:nYbEKGxwjKM

4

These 2 videos helped me to solve the issue:

https://www.youtube.com/watch?v=sj42pjgpEmc&list=PL_pshehRlH0I2o80g6fvunFPDWfESyHTO&index=3

https://www.youtube.com/watch?v=Uh3hT7aSgwI&list=PL_pshehRlH0I2o80g6fvunFPDWfESyHTO&index=3