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

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Joachim
      Long time user and huge fan of PW, but this time I can't find an answer to my question this time:
      For my social media buttons, I have a Repeater field called var_link_web with two fields: one is for the URL, and the other is an Images field containing two images that are used as a background-image for a <div>, of which the second is the ':hover' version (although activated through JavaScript here). 
      There are four instances of this Repeater, of which two are 'turned off'.
      I use the following PHP in my _main.php to call them, wrapped in <p><?php == ?></p>:
      $s_m_button = $variables->var_link_web; foreach($s_m_button as $button){ $button_image = $button->var_link_image->first->height(80); $button_image2 = $button->var_link_image->eq(1)->height(80); echo " <a href='$button->var_link_url'> <div class='image_link' style='background-image:url({$button_image->url})' onMouseOver='this.style.backgroundImage=url({$button_image2->url})' onMouseOut='this.style.backgroundImage=url({$button_image->url})'> </div> </a>"; }; ($variables leads to an unpublished page with several fields I want to have easy access to, and is defined in _init.php.)
      However, this gives me the following result:

      I have no idea where the extra <p>'s come from. The URL field has the 'HTML Entity Encoder' turned on. What's even weirder is that the HTML source file seemingly renders correctly:
      <p> <a href='https://www.facebook.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1045/icons-facebook-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square.0x80.png)"'> </div> </a> <a href='https://www.instagram.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1046/icons-instagram-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square.0x80.png)"'> </div> </a> </p> Removing the JavaScript has no effect. I'm probably missing something obvious, but am at a loss here.
       
      Thank you in advance!
    • By franciccio-ITALIANO
      Hi, I have created over twenty different templates for the same site.
      In all of them, the same long piece of html code appears. 
      Could someone suggest me the php code I need to write in the template files to link that piece of html code, which is always the same everywhere?
      What strategies could I use to link it?
      The problem is that this long piece of code that is identical everywhere, MAY change IN TIME. So, when I fix it, I would have to change it in all twenty template files.... 
       
    • By Zendex
      Hi,
      I am trying to make a site for a studio, and I wanted to set a specific hover effect for my text. I want the background of the text to be lit up in the full height of the nav bar but it doesn't do it. I showed the expected result in the png in the attached files. I will also set the code here below, the top part is a css reset.
       
      HTML:
      <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Zendex</title>
          <link href="style.css" rel="stylesheet" type="text/css">
          <link rel="preconnect" href="https://fonts.gstatic.com"> 
      <link href="https://fonts.googleapis.com/css2?family=Offside&display=swap" rel="stylesheet">
      </head>
      <body>
          <div id="nav_bar">
              <div id="Zendex">ZENDEX</div>
      <ul>
          <a href="contact.html"><li>CONTACT</li></a>
          <a href="films.html"><li>FILMS</li></a>
          <a href="about.html"><li>ABOUT</li></a>
          <a href="home.html"><li>HOME</li></a>
              </ul>
          </div>
          <div class="main"></div>
      </body>
      </html>
      CSS:
      @charset "UTF-8";
      /* CSS Document */
      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed, 
      figure, figcaption, footer, header, hgroup, 
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
      }
      article, aside, details, figcaption, figure, 
      footer, header, hgroup, menu, nav, section {
          display: block;
      }
      body {
          line-height: 1;
          background-color: #6A6969;
      }
      ol, ul {
          list-style: none;
      }
      blockquote, q {
          quotes: none;
      }
      blockquote:before, blockquote:after,
      q:before, q:after {
          content: '';
          content: none;
      }
      table {
          border-collapse: collapse;
          border-spacing: 0;
      }
      /*-------------------------------------------------------------------------------------------------------------------------------------------------*/
      #nav_bar{
          overflow: hidden;
          position: fixed;
          top: 0;
          width: 100vw;
          height: 125px;
          background-color: #484848;
          border: solid 1px black;
      }
      li{
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: right;
          margin: 45px 50px 0px 0px;
          height: 125px;
      }
      #Zendex{
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: left;
          margin: 45px 0px 0px 100px;
          color: azure;
      }
      #home{
          
      }
      #about{
          
      }
      #films{
          
      }
      #contact{
          
      }
      ul{
          margin: 0px 50px 0px 0px;
          color: azure;
          height: 125px;
      }
      a:link{
          color: white;
      }
      li:hover{
          height: 125px;
          background-color: #6A6969;
          color: white;
      }
       

    • By hellomoto
      I can't tell what's wrong; my local development version appears just fine, but I copy over the site files and db online and the homepage content is not being contained. This is what it should look like (same site in the same browser, running on my localhost): http://imgur.com/UFZFzrd
      What could be the problem here? Sorry to bring up something so irrelevant to PW here, I just know that you all are a valiant and helpful group, and no one on StackExchange seems to even know what I'm talking about.
      Thanks a lot.
    • 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.
×
×
  • Create New...