Jump to content


Photo

Videos inside processwire: How to embed videos inside processwire?

videos embed flash youtube html

  • Please log in to reply
43 replies to this topic

#1 jester.vergara

jester.vergara

    Newbie

  • Members
  • Pip
  • 2 posts
  • 0

  • LocationPhilippines

Posted 18 January 2012 - 08:48 AM

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

<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.c...ailpage"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.c...yer_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></object>

#2 AnotherAndrew

AnotherAndrew

    Sr. Member

  • Members
  • PipPipPipPip
  • 162 posts
  • 24

Posted 18 January 2012 - 09:44 AM

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

#3 Soma

Soma

    Hero Member

  • Moderators
  • 3,186 posts
  • 1740

  • LocationSH, Switzerland

Posted 18 January 2012 - 10:08 AM

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.

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.

@somartist | modules created | support me, flattr my work flattr.com


#4 ryan

ryan

    Hero Member

  • Administrators
  • 5,771 posts
  • 3108

  • LocationAtlanta, GA

Posted 18 January 2012 - 11:47 AM

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


#5 Pete

Pete

    Administrator

  • Administrators
  • 1,756 posts
  • 657

  • LocationChester, England

Posted 18 January 2012 - 01:15 PM

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>http://www.youtube.com') !== false) {
	$replacement = '<iframe width="640" height="360" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
	$page->body = preg_replace('#<p>\s*http://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 :)

#6 ryan

ryan

    Hero Member

  • Administrators
  • 5,771 posts
  • 3108

  • LocationAtlanta, GA

Posted 19 January 2012 - 06:37 PM

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

#7 Pete

Pete

    Administrator

  • Administrators
  • 1,756 posts
  • 657

  • LocationChester, England

Posted 20 January 2012 - 02:27 AM

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.

#8 jester.vergara

jester.vergara

    Newbie

  • Members
  • Pip
  • 2 posts
  • 0

  • LocationPhilippines

Posted 20 January 2012 - 09:11 AM

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.

#9 nikola

nikola

    Sr. Member

  • Members
  • PipPipPipPip
  • 224 posts
  • 81

  • LocationZagreb, Croatia

Posted 22 January 2012 - 03:37 PM

Ryan,

maybe this would be interesting for video resizing...
Check out my ProcessWire admin themes: Futura Remixed Admin Theme / Moderna Admin Theme / Futura Admin Theme

#10 ryan

ryan

    Hero Member

  • Administrators
  • 5,771 posts
  • 3108

  • LocationAtlanta, GA

Posted 23 January 2012 - 12:44 PM

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.

#11 AnotherAndrew

AnotherAndrew

    Sr. Member

  • Members
  • PipPipPipPip
  • 162 posts
  • 24

Posted 26 January 2012 - 08:57 PM

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?

#12 Pete

Pete

    Administrator

  • Administrators
  • 1,756 posts
  • 657

  • LocationChester, England

Posted 27 January 2012 - 02:09 AM

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

#13 ryan

ryan

    Hero Member

  • Administrators
  • 5,771 posts
  • 3108

  • LocationAtlanta, GA

Posted 27 January 2012 - 09:13 AM

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.

#14 Pete

Pete

    Administrator

  • Administrators
  • 1,756 posts
  • 657

  • LocationChester, England

Posted 27 January 2012 - 09:33 AM

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

#15 marcin

marcin

    Jr. Member

  • Members
  • PipPip
  • 30 posts
  • 1

Posted 29 February 2012 - 06:01 AM

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.

#16 adamkiss

adamkiss

    Master of the universe

  • Moderators
  • 1,078 posts
  • 289

Posted 29 February 2012 - 09:30 AM

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.

#17 diogo

diogo

    Hero Member

  • Moderators
  • 1,982 posts
  • 1061

  • LocationPorto, Portugal

Posted 29 February 2012 - 10:31 AM

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)

#18 raydale

raydale

    Distinguished Member

  • Members
  • PipPipPipPip
  • 100 posts
  • 46

Posted 18 March 2012 - 04:10 AM

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.

#19 Pete

Pete

    Administrator

  • Administrators
  • 1,756 posts
  • 657

  • LocationChester, England

Posted 18 March 2012 - 04:52 AM

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:

http://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.

#20 diogo

diogo

    Hero Member

  • Moderators
  • 1,982 posts
  • 1061

  • LocationPorto, Portugal

Posted 31 March 2012 - 11:25 AM

One more option for this: http://starfishmod.g...ery-oembed-all/





Also tagged with one or more of these keywords: videos, embed, flash, youtube, html

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users