About Video embed for YouTube/Vimeo

User Favorite Module

Enables translation of YouTube or Vimeo URLs to full embed codes, resulting in a viewable video in textarea fields you apply it to. Now with support for responsive videos too.

Category 1Photo/Video/Audio
Modules that perform some function related to media such as photos and audio/video.
Category 2Social, Feeds, Services
Modules that provide or work with social networking services and/or external feeds.
Category 3Text Formatters
Textformatter modules that provide run-time formatting for blocks of text (typically used with Text/Textarea fields).
Release StateStable
Should be safe for use in production environments. *
Authorryan
Module Version1.1.1
Class NameTextformatterVideoEmbed
Compatibility2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 3.0
Date AddedJuly 23, 2012
Last UpdatedAugust 21, 2016
Recommended ByNew recommendations may take up to 1 day to appear.

Instructions

This module's files should be placed in /site/modules/TextformatterVideoEmbed/
How to install or uninstall modules

README

Video embed for YouTube and Vimeo

ProcessWire Textformatter module that enables translation of YouTube or Vimeo URLs to full embed codes, resulting in a viewable video in textarea fields you apply it to.

How to install

  • Copy the TextformatterVideoEmbed.module file to your /site/modules/ directory (or place it in /site/modules/TextformatterVideoEmbed/).

  • Click check for new modules in ProcessWire Admin Modules screen. Click install for the module labeled: "Video embed for YouTube/Vimeo".

  • Now you will be on the module config screen. Please make note of the config options and set as you see fit.

How to use

  • Edit your body field in Setup > Fields (or whatever field(s) you will be placing videos in). On the details tab, find the Text Formatters field and select "Video embed for YouTube/Vimeo". Save.

  • Edit a page using the field you edited and paste in YouTube and/or Vimeo video URLs each on their own paragraph.

Example

How it might look in your editor (like TinyMCE):

Here are two videos about ProcessWire

http://www.youtube.com/watch?v=Wl4XiYadV_k

http://www.youtube.com/watch?v=XKnG7sikE-U

And here is a great video I watched earlier this week:

http://vimeo.com/18280328

How it works

This module uses YouTube and Vimeo oEmbed services to generate the embed codes populated in your content. After these services are queried the first time, the embed code is cached so that it doesn't need to be pulled again.

The advantage of using the oEmbed services is that you get a video formatted at the proper width, height and proportion. You can also set a max width and max height (in the module config) and expect a proportional video.

Configuration

You may want to update the max width and max height settings on the module's configuration screen. You should make these consistent with what is supported by your site design.

If you change these max width / max height settings you may also want to check the box to clear cache, so that YouTube/Vimeo oembed services will generate new embed codes for you.

Using with Markdown, Textile or other LML

This text formatter is looking for a YouTube or Vimeo video URL surrounded by paragraph tags. As a result, if you are using Markdown or Textile (or something else like it) you want that text formatter to run before this one.That ensures that the expected paragraph tags will be present when TextformatterVideoEmbed runs. You can control the order that text formatters are run in by drag/drop sorting in the field editor.


Copyright 2016 by Ryan Cramer

Comments

  • Peter Verkooijen

    Peter Verkooijen 10 months ago 10

    This module sort of solves the video embed problem, but...

    1. It doesn't work in combination with HTML Entity Encoder?
    2. You lose all YouTube embed customization options.

    Normally I add the following to the iframe embed url:

    ... ?rel=0&showinfo=0&autohide=1&wmode=transparent&modestbranding=1&color=white

    That removes unnecessary stuff and makes the video look less youtubey. Is there no way to do that in Processwire?

    Is there really no way to force PW or the text editor to just leave iframe code alone? At least from a few trusted sources.

Post a Comment

Your e-mail is kept confidential and not included with your comment. Website is optional.