Jump to content

Videos inside processwire: How to embed videos inside processwire?


jester.vergara
 Share

Recommended Posts

How can I enable this code inside a page in my processwire?

<object style="height: 390px; width: 640px"><param name="movie" value="https://www.youtube.com/watch?v=bQ6D4eZ4r5Y?version=3&feature=player_detailpage"><param'>https://www.youtube.com/watch?v=bQ6D4eZ4r5Y?version=3&feature=player_detailpage"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="https://www.youtube.com/watch?v=bQ6D4eZ4r5Y?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></object>

Link to comment
Share on other sites

ProcessWire's TinyMCE is configured to not allow all tags. There was some thread concerning exactly this subject not so long ago. that might help.

In the field settings you'll find the TinyMCE advanced configuration settings under "input" tab.

Otherwise it's also possible to setup a textfield you would only put the video url into, and use that in your php template, so you don't need to enter the whole code in the RT. Depends what you want to do but I would go with this.

Link to comment
Share on other sites

ProcessWire's TinyMCE is configured to not allow all tags. There was some thread concerning exactly this subject not so long ago. http://processwire.c...ch__1#entry5519 that might help.

This is the method that I use and find it really handy. The main.php file for processwire.com has this at the top:

if(strpos($page->body, '<p>https://www.youtube.com') !== false) {
$replacement = '<iframe width="640" height="360" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
$page->body = preg_replace('#<p>\s*https://www.youtube.com/watch\?v=([^\s&<]+).*?</p>#iu', $replacement, $page->body);
}
  • Like 3
Link to comment
Share on other sites

This is the method that I use and find it really handy. The main.php file for processwire.com has this at the top:

if(strpos($page->body, '<p>https://www.youtube.com') !== false) {
$replacement = '<iframe width="640" height="360" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
$page->body = preg_replace('#<p>\s*https://www.youtube.com/watch\?v=([^\s&<]+).*?</p>#iu', $replacement, $page->body);
}

I like that idea ryan, so basically any YouTube URL you type into the editor gets converted when the page is rendered :)

Link to comment
Share on other sites

I like that idea ryan, so basically any YouTube URL you type into the editor gets converted when the page is rendered

Exactly, any youtube URL in it's own paragraph. Soma and I collaborated on this in another thread, and I've been using it ever since. :) I would turn it into a module, except that I'm not really sure how to handle the width/height issue (it would need to be predefined somehow).

Link to comment
Share on other sites

Well I think it would be a good module - I don't think that if you were putting multiple videos on one site that the dimensions would be different for each vid, so globally setting it would be fine.

The only other thing I can think of is specifying either different dimensions for different templates or for different fields. Something like the config options in Antti's thumbnail module is what I'm thinking for that.

Link to comment
Share on other sites

Thank you all for the responses.. I am really grateful to you people. Its my first time to develop my own website and I really want to gain some experience in web dev.

my website is here. it has still no contents but I already modified the themes. I am just starting to learn how can totally understand the architecture of processwire.

Link to comment
Share on other sites

maybe this would be interesting for video resizing...

This is a good link, but actually we're trying to figure out how to do it from just the video URL rather than the embed code. If we've got the embed code, then figuring out (or proportionally scaling) the dimensions is no problem. But TinyMCE won't take an embed code by default, so we're trying to embed videos, knowing nothing but the URL to them. Kind of like how this forum, IP.Board does. Though it looks like IP.Board just uses a predefined width/height rather than trying to figure out the video's dimensions. And I'm thinking that's the same approach we'll have to take.

Link to comment
Share on other sites

  • 1 month later...

My method: I use a simple textarea with youtube links separated by newlines. Then, in template, I split them and generate iframes in loop.

It has one, significant disadvantage: all the movies are placed in solid column, so it's there is no way to intersperse text with movies.

Link to comment
Share on other sites

The simplest way here would some kind of system to implement special types of Tags in the textarea... Now, if somebody was working on this...

Just joking! somebody does :)

I have developed little Tags class, to allow us simply include images from image field with captions in the blog posts - since we're all skilled devs here, we use it like this: [after you've uploaded all used images and set their captions]:

 {{ figureimage index=0 figure_index=1 }} 

Something like this could be easily developed for videos: you could easily have something following in your content (be it tinymce or other things):

 {{ vimeo id=4uy78 }} 

and it would add video.

Link to comment
Share on other sites

  • 3 weeks later...

I've never heard of oEmbed before, but it looks like it would be a good solution to make an easy fieldtype for videos.

http://oembed.com/

There are also some alternatives based on it.

http://noembed.com/

http://autoembed.com (this one looks nice, but it's only free for personal use)

If I remember correctly WordPress uses oEmbed. It makes content management pretty simple - just put the URL of the video you want on a new line in a text field and you're done. Very user-friendly.

Link to comment
Share on other sites

Unless I'm missing something here with oEmbed, you don't need any complicated libraries.

Assuming for example the two most common video services you use on a particular site are YouTube and Vimeo, you would simply need to check the URL that has been input into a text field (or URL field or whatever) in PW for either "youtube" or "vimeo" and then use CURL to do either:

https://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D-UUx10KOWIE&format=xml

or:

http://vimeo.com/api/oembed.xml?url=http%3A//vimeo.com/7100569

and parse the XML into something useable in a template.

I think that the second and third solutions linked to in previous posts poll those two websites (noembed and autoembed), adding another unnecessary link which relies on those websites being online all the time (I might be wrong).

I would imagine that a module for oEmbed would "simply" (haha :D) detect which site, if any, the URL relates to, fetch the XML response for that site's video service and turn it into something useable - so a normal module call for this in a template would probably be about 4 lines or so and could also allow you to specify dimensions for the video and then do all of the outputting for you.

You could then theoretically just dump YouTube/Vimeo/whatever URL's into the middle of your TinyMCE content if you like and have the module parse the $page->body field, turning these links into embedded videos if you really wanted to.

I'm tempted to build this module myself as I've currently only managed to build support for YouTube in my current project (using a lot of Google YouTube API files that now appear to be unnecessary), but it'll be a few weeks before I got around to it so if anyone else wants to have a go at it feel free.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Nice one diogo! That's a far more advanced version of what I had in mind, except I was going to do it in PHP (whenever I get around to it). It certainlydoes help by having all the API information in one place!

Link to comment
Share on other sites

  • 1 month later...

@Ryan that example looks wonderfully simple.

I've used it, the IF is working (detecting the YT vid URL in a P tag) but it seems the preg_replace is not triggering/working — the P tag and it's URL remain unchanged in the rendered page. Any pointers?

I've looked to see if I can see the other thread you mentioned where you worked on this with Soma but I couldn't see it.

Thanks in advance @Rayan (or anyone) who's used this and might have an idea what else I should try.

Link to comment
Share on other sites

Steve, I tried the second one first, then realized it was likely not matching due to being a different format so I tried the 1st one next, both do 'nothing magic' ;)

https://www.youtube.com/watch\?v=pbDn_Np3Pfw
https://www.youtube.com/watch?feature=player_embedded&v=pbDn_Np3Pfw

I assume it's OK, I have the if(strpos... code at the top mytemplate.inc, the whole rest of the page is in mytemplate.inc and mytemplate.php is the template file listed in PW and in mytemplate.php there is just one include, for mytemplate.inc.

Cheers and take a Sunday off and don't reply today eh ;) (unless you're as keen as a sharpened fox covered in mustard).

Link to comment
Share on other sites

Alan,

can you pastie or gist the exact paragraph that is failing to match please -- if you post it here, the forum changes (entity encodes it for display in HTML) it and it's more difficult to see exactly how the regex is failing to match. Another option would be to add it as an attachment to a post so it can be downloaded and tested.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...