Jump to content
ryan

Module: Video embed for YouTube/Vimeo (TextformatterVideoEmbed)

Recommended Posts

If phpmotion.com supports oembed, then it is feasible for TextformatterVideoEmbed to support it in the same way as YouTube/Vimeo. 

Share this post


Link to post
Share on other sites

hi Adrian.
cool i got the img Thank you.

Now is there a way in module to get this youtube video id ? or do i have to do it with js ?

thanks :)

Share this post


Link to post
Share on other sites

It depends on what you want to do exactly. 

Because the module converts a Youtube link that is in an RTE texatarea field, you already know the id of the video because it is in the link. You could easily insert the image link using the url schema from that first link I posted.

Maybe if you can explain your usage scenario we can help more. Where you do want to display the image? How is it connected to the embedded link.

It is easy to grab the id of the video from the link in either PHP or JS using a regex, but the video module also stores the id in the PW database (in the textformatter_video_embed table), so this might also be an option depending on your needs.

EDIT: Here is the function in the module that parses the video url:

https://github.com/ryancramerdesign/TextformatterVideoEmbed/blob/master/TextformatterVideoEmbed.module#L127

Or you can use:

$url = "http://www.youtube.com/watch?v=C4kxS1ksqtw&feature=relate";
parse_str( parse_url( $url, PHP_URL_QUERY ), $my_array_of_vars );
echo $my_array_of_vars['v'];    
  // Output: C4kxS1ksqtw
  • Like 1

Share this post


Link to post
Share on other sites

Wow Ty Adrian.

Im just trying to open embeded video in the fancybox popup window after clicking on thumb. :)
Again thanks alot

Share this post


Link to post
Share on other sites

Ok, so it sounds like you are manually adding the thumbnail image to an RTE? Maybe you don't really need the video embed module, because you don't actually want the video to play inside the RTE field?

There are lots of ways to go about this. You could use a regex in your template. You could make your own module. You could maybe use the Hanna Code module (http://modules.processwire.com/modules/process-hanna-code/) and just enter the video ID and use that to output the thumbnail and link to open in fancybox.

You could even use JS to modify the link.

An example of your exact usage would really help to narrow down the best approach.

Share this post


Link to post
Share on other sites

i just did what u said, i dropped the module, now from admin panel i just enter the url for youtube movie and then i do this :

<?php
    $videoFolder = $pages->find('parent=1051, limit=3');
    $out ="";
        foreach($videoFolder as $videoItem){
            $vidUrl = $videoItem->video;
            parse_str( parse_url( $vidUrl, PHP_URL_QUERY ), $my_array_of_vars );
            $imgUrl = $my_array_of_vars['v'];
            $search     = '/youtube\.com\/watch\?v=([a-zA-Z0-9]+)/smi';
            $replace    = "youtube.com/embed/$1?autoplay=1";
            $vidUrl = preg_replace($search,$replace,$vidUrl);
            $out .= "<div>";
            $out .= "<a class='fancybox' data-fancybox-type='iframe' href='{$vidUrl}'><img src='http://img.youtube.com/vi/{$imgUrl}/0.jpg' alt='{$videoItem->title}' /></a>";
            $out .= "<div class='name'><a href='{$vidUrl}'>{$fotoItem->title}</a></div>";
            $out .= "</div> ";
        }
        echo $out;
 ?>

And thats it i got my video working :)
Ty alot Adrian u ware most helpful

  • Like 2

Share this post


Link to post
Share on other sites

Glad you got it working.

The $videoItem->video makes me think you are storing the URL for the video in a dedicated field? If that's the case, you shouldn't need to do that preg_replace. You already have the id from $my_array_of_vars['v'] so you should be able to just build the embed version directly from that.

  • Like 1

Share this post


Link to post
Share on other sites

Glad you got it working.

The $videoItem->video makes me think you are storing the URL for the video in a dedicated field? If that's the case, you shouldn't need to do that preg_replace. You already have the id from $my_array_of_vars['v'] so you should be able to just build the embed version directly from that.

HA! ... true  :D

<?php
	$videoFolder = $pages->find('parent=1051, limit=3');
	$out ="";
		foreach($videoFolder as $videoItem){
			$vidUrl = $videoItem->video;
			parse_str( parse_url( $vidUrl, PHP_URL_QUERY ), $my_array_of_vars );
			$vidID = $my_array_of_vars['v'];
			$out .= "<div>";
			$out .= "<a class='fancybox' data-fancybox-type='iframe' href='http://www.youtube.com/embed/{$vidID}?autoplay=1'><img src='http://img.youtube.com/vi/{$vidID}/0.jpg' alt='{$videoItem->title}' /></a>";
			$out .= "<div class='name'><a href='http://www.youtube.com/embed/{$vidID}?autoplay=1'>{$videoItem->title}</a></div>";
			$out .= "</div> ";
		}
		echo $out;
 ?>

Ty alot :)

Share this post


Link to post
Share on other sites

Just noticed that if you copypaste youtube url from Chrome (Win7) addressbar into CKeditor, it will be transformed into <a> tag and therefor embedding doesn't work. I don't know how CKeditor does that, since if you copypaste it from another source (like text editor), it will not be transformed into a link. 

Possible solution could be allowing links also transformed into a embed. What do you think?

  • Like 1

Share this post


Link to post
Share on other sites

It might just be a matter of the forum using an older version of CKEditor (3 vs 4). Does it work if you do an unformatted paste? i.e. shift+ctrl+v ? Though I'd have no problem making it support the videos as links, but it seems like that then creates a problem where you actually want to link to a video (as opposed to embedding it). If someone puts the link in it's own paragraph, maybe it's safe to assume they are trying to embed though. Especially if the anchor text matches the src attribute. 

Share this post


Link to post
Share on other sites

Hi all, 

I have an issue with the module.

It works fine for me under all browsers apart from Firefox(Win 7) - I've updated to version 26.0, from 24.*;

However I still get only a black box. I can see the code, exactly the same as under Chrome/Safari/Opera, but it doesn't work.

Any ideas what could be causing the problem ? 

p.s. I get no errors with Firebug. 

Share this post


Link to post
Share on other sites

Is it possible your browser doesn't have the necessary plugins to display videos (Flash, etc.) or has some kind of blocker installed? I know with my copy of Firefox, both are the case (no flash, and everything external blocked... but it was intentionally configured that way). 

Share this post


Link to post
Share on other sites

Is there any way I can call that youtube ID part from template using this module?

Youtube uses these urls:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

to give us pre-generated thumbnails, so it would be great if I could use thumbnails on my front page as a preview, which leads to full page with properly embeded video.

Share this post


Link to post
Share on other sites

@Ryan: fantastic Module. I have used it the first time now on a site for a colleague.

There is one thing I want to ask if it could be possible:

With the param rel=0 added to the $embedCode  $queryString (e.g. ?feature=oembed&rel=0) the video gets reset to the first frame of it after playing, - instead of displaying a lot of thumbs to other videos.

On some pages / sites it looks much better this way.

Can this be added to the module? (maybe as option, or default?)

Share this post


Link to post
Share on other sites

Horst, it should already support the rel=0 option for video embedding (at least it used to). Try adding it to the YouTube URL you are embedding. If it doesn't work, go to the module settings and clear the video cache and try again. 

Share this post


Link to post
Share on other sites

Ryan, unfortunately it doesn't work. (have flushed the DB)
 
My url is


and the resulting code in DB is

video_id = oUdcc7fYlp8?rel=0

embed_code = <iframe width="640" height="360" src="http://www.youtube.com/embed/oUdcc7fYlp8?feature=oembed" frameborder="0" allowfullscreen></iframe>

The rel=0 doesn't make it into the embedded code. ??

Share this post


Link to post
Share on other sites

Fixed an issue with embedding in secure pages. YouTube's oembed service doesn't return https urls, even if the feed url is https.

Change line 86 to:

$embedCode = str_replace('http','https',$data['html']);

Share this post


Link to post
Share on other sites

Hi Guys!

A question for you gents...

Is it possible to modify the module such that it automatically adds  &rel=0  to all our YouTube video urls that we enter?

Been trying to plug it in into various parts of the module but I can't seem to get it to work.

It would save having to type in $rel=0 every single time I add a video.

Cheers guys!

Share this post


Link to post
Share on other sites

After you installed the Textformatter, go to /site/modules/TextformatterVideoEmbed.module

add a line in the methode embedYoutube:

// line number +/- 145
$queryString = isset($matches[3][$key]) ? $matches[3][$key] : '';
$queryString = $queryString . "&rel=0"; // this is the new line you should add

---

If you make modifications to this module, it's better to rename the module and the file and install it again. This to insures updates won't delete your modifications

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By gebeer
      I am happy to present my new fieldtype FieldtypeImageFromPage. It is made up of 2 modules:
      Fieldtype Image Reference From Another Page is a Fieldtype that stores a reference to a single image from another page. The image can be selected with the associated Inputfield.
      Inputfield Select Image From Page is an Inputfield to select a single image from images on a predefined page and it's children.
      And there also is a helper module that takes care of cleanup tasks.
      This module evolved out of a discussion about my other Module FieldtypeImagePicker.  It caters for use cases where a set of images is being reused multiple times across a site. With this fieldtype these images can be administered through a chosen page. All images uploaded to that page will be available in the inputfield.
      When to use ?
      Let editors choose an image from a set of images that is being used site-wide. Ideal for images that are being re-used across the site.
      Suited for images that are used on multiple pages throughout the site (e.g. icons).
      Other than the native ProcessWire images field, the images here are not stored per page. Only references to images on another page are stored. This has several advantages:
      one central place to organize images when images change, you only have to update them in one place. All references will be updated, too. (Provided the name of the image that has changed stays the same) Features
      Images can be manipulated like native ProcessWire images (resizing, cropping etc.) Image names are fully searchable through the API Accidental image deletion is prevented. When you want to delete an image from one of the pages that hold your site-wide images, the module searches all pages that use that image. If any page contains a reference to the image you are trying to delete, deletion will be prevented. You will get an error message to help you edit those pages and remove references there before you can finally delete the image. How to install and setup
      Download and install this module like any other modules in ProcessWire Create a page in the page tree that will hold your images. This page's template must have an images field Upload some images to the page you created in step 2 Create a new field. As type choose 'Image Reference From Another Page'. Save the field. In 'Details' Tab of the field choose the page you created in step 2 Click Save button Choose the images field name for the field that holds your images (on page template from step 2) Click Save button again Choose whether you want to include child pages of page from step 2 to supply images Add the field to any template You are now ready to use the field View of the inputfield on the page edit screen:

      View of the field settings

      The module can be installed from this github repo. Some more info in the README there, too.
      In my tests it was fairly stable. After receiving your valued feedback, I will eventually add it to the modules directory.
      My ideas for further improvement:
      - add ajax loading of thumbnails
      Happy to hear your feedback!
       
    • By gebeer
      Although the PW backend is really intuitive, ever so often my clients need some assistance. Be it they are not so tech savvy or they are not working in the backend often.
      For those cases it is nice to make some help videos available to editors. This is what this module does.
      ProcessHelpVideos Module
      A Process module to display help videos for the ProcessWire CMS. It can be used to make help videos (screencasts) available to content editors.
      This module adds a 'Help Videos" section to the ProcessWire backend. The help videos are accessible through an automatically created page in the Admin page tree. You can add your help videos as pages in the page tree. The module adds a hidden page to the page tree that acts as parent page for the help video pages. All necessary fields and templates will be installed automatically. If there are already a CKEditor field and/or a file field for mp4 files installed in the system, the module will use those. Otherwise it will create the necessary fields. Also the necessary templates for the parent help videos page and it's children are created on module install. The module installs a permission process-helpvideos. Every user role that should have access to the help video section, needs this permission. I use the help video approach on quite a few production sites. It is stable so far and well received by site owners/editors. Up until now I installed required fields, templates and pages manually and then added the module. Now I added all this logic to the install method of the module and it should be ready to share.
      The module and further description on how to use it is available on github: https://github.com/gebeer/ProcessHelpVideos
      If you like to give it a try, I am happy to receive your comments/suggestions here.
    • By Robin S
      A module created in response to the topic here:
      Page List Select Multiple Quickly
      Modifies PageListSelectMultiple to allow you to select multiple pages without the tree closing every time you select a page.
      The screencast says it all:

       
      https://github.com/Toutouwai/PageListSelectMultipleQuickly
      https://modules.processwire.com/modules/page-list-select-multiple-quickly/
    • By gebeer
      Hello all,
      sharing my new module FieldtypeImagePicker. It provides a configurable input field for choosing any type of image from a predefined folder.
      The need for it came up because a client had a custom SVG icon set and I wanted the editors to be able to choose an icon in the page editor.
      It can also be used to offer a choice of images that are used site-wide without having to upload them to individual pages.
      There are no image manipulation methods like with the native PW image field.
      Module and full description can be found on github https://github.com/gebeer/FieldtypeImagePicker
      Kudos to @Martijn Geerts. I used his module FieldTypeSelectFile as a base to build upon.
      Here's how the input field looks like in the page editor:

      Hope it can be of use to someone.
      If you like to give it a try, I'm happy to hear your comments or suggestions for improvement. Eventually this will go in the module directory soon, too.
    • By bernhard
      @Sergio asked about the pdf creation process in the showcase thread about my 360° feedback/survey tool and so I went ahead and set my little pdf helper module to public.
      Description from PW Weekly:
       
      Modules Directory: https://modules.processwire.com/modules/rock-pdf/
      Download & Docs: https://github.com/BernhardBaumrock/RockPDF
       
      You can combine it easily with RockReplacer: 
      See also a little showcase of the RockPdf module in this thread:
       
×
×
  • Create New...