Videos inside processwire: How to embed videos inside processwire?

[jester.vergara]

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>

[AnotherAndrew]

Have you tried using the html source button in the tinymce editor? If not, then that would be the easiest way.

[Soma]

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.

[ryan]

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);
}

[Pete]

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

[ryan]

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).

[Pete]

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.

[jester.vergara]

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.

[nikola]

Ryan,

maybe this would be interesting for video resizing...

[ryan]

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.

[AnotherAndrew]

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

Where is this "main.php" file that you are talking about? Do you mean any template file in a site?

[Pete]

I think he means head.inc - the code would certainly work there

[ryan]

main.php just refers to a main markup template. It would be the same thing as a head.inc and foot.inc combined. But many use a main.php rather than separate header/footer includes.

[Pete]

Ah yes, I remember that discussion about different ways of displaying templates/content now.

[marcin]

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.

[Adam Kiss]

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.

[diogo]

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)

[raydale]

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.

[Pete]

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 ) 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.

[diogo]

One more option for this: http://starfishmod.github.com/jquery-oembed-all/

[Pete]

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!

[alan]

@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.

[netcarver]

Alan,

Can you pastie or gist the exact paragraph text that is failing to match the preg_replace please?

[alan]

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).

[netcarver]

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.