Extracting video ID of YouTube URL

By: Julius hernández | Asked: 06/14/2022
ForumsCategory: How-toExtracting video ID of YouTube URL
Julius hernándezJulius hernández asked 2 years ago
The goal is to paste the URL of any YouTube video in a field and copying it in another field. Why? Because if I get the whole url in the field and put it in a view, inside an iframe, YouTube rejects the connection. So, I can't put this in a View: < div class="mediaVideoShow" >< iframe src="[youtubelink]" >< /iframe >< /div > Which renders as: < div class="mediaVideoShow" >< iframe src="https://www.youtube.com/watch?v=89OP78l9oF0" >< /iframe >< /div > The correct form to display a video inside an iframe is: < div class="mediaVideoShow" >< iframe src="https://www.youtube.com/embed/89OP78l9oF0" >< /iframe >< /div > But this would mean to force the end user to manually extract the YouTube ID, which is something difficult for most of users. So my idea is to get the URL of a YouTube video and using javascript (or something else) to extract the ID on the fly, and copying to another field, where can be put in the view like this: < div class="mediaVideoShow" >< iframe src="https://www.youtube.com/embed/[youtubelink-id]" >< /iframe >< /div > Which would render as < div class="mediaVideoShow" >< iframe src="https://www.youtube.com/embed/89OP78l9oF0" >< /iframe >< /div > Any help? What would be the easiest method to accomplish?
2 Answers
Bobby Clapp answered 2 years ago
Maybe like this with JS -> https://gist.github.com/takien/4077195
Julius hernándezJulius hernández answered 2 years ago
Thanks, Bobby, I don't want to be abusive but... how do I relate the result with the desired field? Should I put this code in the form Customize HTML After Fields or how? :flushed: 
Victor Font replied 2 years ago

Julius, Bobby's on the right track. This is a JavaScript function that appears to be able to return the URL as you expected. Nice find Bobby! Thank you researching this.

There seems to be quite a few interesting comments to read on this page and the script should be tested to understand exactly what the function returns. It should also be tested for your specific use case to make sure it functions exactly as you need it to. There are also abbreviated versions of the function in the comments that you might want to try. If you need help determining if this function is fit for purpose for your project, perhaps you could check on Bobby's availability to see if he can help. If he's anything like me though, he's going to be busy I'm sure.

As for where the code goes, as with any JavaScript/jQuery based code, you install the script in the After Fields section on the form's Customize HTML page. Don't forget the tags.

To develop your code further, you need a jQuery wrapper. If the function works for you, you can add it as is to the top of the jQuery file under the wrapper opening. This make the function available to the rest of the code beneath.

Next, just use the standard jQuery notation to call the function and use the returned URL as the field values. There are plenty of examples in the Formidable Knowledge Base about copying fields and setting values with jQuery.

To test this type of snippet, make sure you use plenty of console.logs() to make sure the values you are generating are what you need. Only you can determine what a successful test looks like based on whether it meets your needs or not. In any case, you may have to write all of this code anyway just to test what the function does. At the very least, you have to create the jQuery wrapper to test what the function returns.

Whatever this project is that you're working on sounds interesting. You always seem to have interesting projects when you've asked for help in the past. Keep on asking, I'm sure your helping a lot of users. Good luck on getting this sourced out.

Bobby Clapp replied 2 years ago

You're going to want to wrap it in something like .focusout(), such that when the user leaves the input field of the youtube url field it pushes that value into a variable. Then you can use it in a function or whatever works best for getting the ID you are looking for. You can then set the value of your second field to the result of that collected value.

Julius hernándezJulius hernández replied 2 years ago

Thanks both, the thing is I always struggle with the mechanics of the code, not with the code itself... I often know what they do, but it's sometimes confusing for me where to put it and how to pull the values here and there. I will try some things with your advicements, then if I fail I'll return here to ask again. Please keep in mind that I'm not a trained coder and programmer as you are.

And yes, Victor, I'm working now in a project to let friends and people to add videos, like movie trailers, tv series, etc., to make personalized recomendations and reviews. It's always to get things done the way we like and not as the big sites (like IMDb) force us to do it. And always keeping an eye in the ease of use for the end user, if more people would like it. It's like, well, it's for my friends and I, but in a future anyone would be able to use it.

Formidable often let me do the things I wish, but also often I find problems like this.

Bobby Clapp replied 2 years ago

Sounds like you're going to need to plan some budget for a consultant if you can't get through code enhancements on your own. We all are likely to offer advice, but not ongoing code writing to resolve your issues. Hopefully you can read through these forums, the formidable masterminds pages, and maybe some of the old slack channels in combination with the FP knowledgebase to help find examples of something that might cover your situation.

Julius hernándezJulius hernández replied 2 years ago

Yes, Bobby, my intention was to point me in the right direction, and you did.

And I found a workaround: truncating the URL with a JS snipett that I found in the Javascript examples of the Formidable site*. The trick is in the line var truncated = sourceValue.substring( 32, 48 ); which starts extracting since the character after the "?v=" part of the URL until the last possible character, and set it in the destination field.

Of course this won't work in other versions of the URL like https://youtu.be/Ab25nviakcw</a&gt;, but it won't be too difficult to implement options to cover various types.

I really can code, but often based in examples to tweak, and of course I would save time with a dedicated consultant, which is beyond my possibilities for now.

Thanks both! Do you recommend that I put this provisional solution in a more visible place of this community, for those who would like to use it and enhance it?

* https://formidableforms.com/knowledgebase/javascript-examples/#kb-truncate-field

Bobby Clapp replied 2 years ago

This question is theoretically answered. I think that is probably enough. Key word searches should make this visible to users "looking" for information.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community