How to get the URL of an embeded Youtube video

SerpentForge
Tourist
5 0 1

It seems when calling the media asset in the theme template it returns the iframe code which is correct.

{{ media | external_video_tag }}

However for my purposes I don't want use iframe I use <object> instead. It just works much better for what I'm doing. 

<object data='https://www.youtube.com/embed/nFPTZWdQ6JI?controls=1&amp;enablejsapi=1&amp;modestbranding=1&amp;play...>

But there doesn't seem to be a way get the uploaded URL without the iframe part? The liquid functions seems quite limited in it's manipulation string functions.

I've tried uploading using the "Add image from URL option" but it says the youtube video is not a valid media file.

I could do this in jquery but would rather not. Any suggestions?

Thanks

0 Likes

Why don't you create a custom settings and use video_url in settings_schema.json instead? This way the user can even change the video easily.

dantepw_0-1597808562536.png

dantepw_1-1597808571691.png



◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
SerpentForge
Tourist
5 0 1

Ok thanks. I forgot to mention this is for the product page. I want videos per product. 

I think your solution is for a single video? 

0 Likes

Yes, this particular one is for a single video, however it can be accessed anywhere in the theme.

For your case you would want to use a block section then within the product page. I made a quick example for you.

1. Add this section to your theme, under the folder section. Name it "custom-section"

{% for block in section.blocks %}
	{{block.settings.video_url}}
{% endfor %}

{% schema %}
{
"name": "Test",
"class": "test-section",
"settings": [


],
"blocks": [
    {
      "type": "select",
      "name": "Product Page",
      "settings": [
 		  {
  "id": "video_url",
  "type": "video_url",
  "label": "Video URL",
  "accept": ["youtube", "vimeo"],
  "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
  "info": "Text",
  "placeholder": "Text"
}
      ]
    }
  ],
"presets": [
{
"name": "Test Section",
"category": "Custom"
}
]
}
{% endschema %}


{% javascript %}
{% endjavascript %}



2. go to customize > add section > custom > test section 

dantepw_0-1597822486938.png


3. add it in and play around, take a look at how it works. It doesn't do anything so far, just prints out all videos. I also forgot to rename it from "product pages" hehe.

You can find the docs in here: https://shopify.dev/docs/themes/settings#video-url

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
SerpentForge
Tourist
5 0 1

Sure that would work thanks. I was also using product metafields but I was trying to use the inbuilt product function of uploading the media file to make it less convoluted to add media files. 

{% assign video  = media | external_video_tag  | split: 'src="' %}
 {% assign v  = video[1]  | split: '"' %}
<div class="splide__slide"><object style="width:100%;height:100%;" data='{{ v[0] }}'></object></div>
 
I ended up using the 'split' function twice to get the URL as Shopify doesn't support regex
0 Likes