Embed Recipe Video in Another Location on Page

If you want to show the recipe video somewhere else on the article page (for example, visible immediately as customers loads the page) you can use the following Liquid snippet to display the embedded Youtube video wherever you want on your article page.

 {% comment %} Recipe Kit Video Placement {% endcomment %}
    {%- assign rk_resource_id = article.id | downcase -%}
    {%- assign rk_mf = article.metafields.recipekit[rk_resource_id] -%}
    {%- if rk_mf != blank and rk_mf.recipe_video != blank -%}
      {% if rk_mf.recipe_video contains '/watch?v=' %}
        {% assign rk_video_split = rk_mf.recipe_video | split: 'https://www.youtube.com/watch?v=' %}
        {% assign rk_video_id = rk_video_split[1] | split: '?' | first | split: '&' | first %}
      {% else %}
        {% assign rk_video_split = rk_mf.recipe_video | split: 'be/' %}
        {% assign rk_video_id = rk_video_split[1] | split: '?' | first | split: '&' | first  %}
      {% endif %}
      {% assign rk_video_embed_url = 'https://www.youtube.com/embed/' | append: rk_video_id %}
      <iframe class="rk_video" src="{{- rk_video_embed_url -}}" width="100%" allowfullscreen></iframe>
    {%- endif -%}
    {% comment %} End Recipe Kit Video Placement {% endcomment %}

You will probably want to hide the existing recipe video, just so there isn't a duplicate showing up.

To do this you can use some CSS in the App Settings page that looks like the following:

#rk_video { display: none; }

Make sure you save all of the above, and you should be good to go!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us