Search the Community

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 Download or clone from GitHub: https://github.com/r...atterVideoEmbed 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". 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 https://www.youtube.com/watch?v=Wl4XiYadV_k https://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/Customization 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 I mostly assume you are using this with TinyMCE. But there's no reason why you can't also use this with something like Markdown or Textile. 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. Thanks to Pete for tuning me into these oEmbed services provided by YouTube and Vimeo a long time ago in another thread.

@gebeer That's an excellent summary, thanks! On the core-patterns one, the 'getExcerpt' example probably isn't ideal because it's only returning an excerpt if output formatting is on, otherwise it's returning the entire 'body' field with tags stripped out, which isn't an 'excerpt'. Usually a 'body' field is HTML (TinyMCE, CKE, etc.), so the formatted version would be the same as the unformatted version, unless there's some other formatters being applied on top of it, like TextformatterVideoEmbed, etc. There's an example of a getExcerpt() in the blog post that I think might work better, though I'm sure there are even better examples possible. In the same file, under API wire access, it says that pages() would not work in a Page class. But actually it would work just fine, so long as functions API is enabled. But what's preferable is $this->wire()->pages because it would be guaranteed to be tied to the correct instance (just in case multi-instance, even if rare). For calls like $this->wire('sanitizer') (where API var is in quotes) I'd suggest $this->wire()->sanitizer instead, just because the IDE will know that it's referring to the Sanitizer class, whereas if 'sanitizer' is in quotes then the IDE won't know, or at least it will have to do a lot more work to know. The same goes for any API variable. Lastly, do you think it could link to the blog post also, since that's the source for some of it -- It might help for folks looking for additional info? Thanks!

Video or Social Post Embed Based on the TextformatterVideoEmbed module developed by Ryan Cramer, we have added the possibility to embed publications of the main social networks Facebook, Twitter and Instagram. ProcessWire Textformatter module that enables translation of YouTube, Vimeo, Instagram, Facebook, Twitter or Issuu URLs to full embed codes, resulting in a viewable video or social post in textarea fields you apply it to. How to install Download or Clone from Github: https://github.com/lexsanchez/VideoOrSocialPostEmbed Copy the VideoOrSocialPostEmbed.module file to your /site/modules/ directory (or place it in /site/modules/VideoOrSocialPostEmbed/). Click check for new modules in ProcessWire Admin Modules screen. Click install for the module labeled: "Video or Social Post Embed". 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 or Social Post Embed". Save. Edit a page using the field you edited and paste in YouTube, Vimeo, Facebook, Twitter, Instagram and/or Issuu URLs each on their own paragraph. Example How it might look in your editor (like TinyMCE): How it works This module uses YouTube, Vimeo, Instagram, Facebook, Twitter and Issuu 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. 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/Facebook/Twitter/Instagram/Issuu oembed services will generate new embed codes for you. Using with Markdown, Textile or other LML This text formatter is looking for a YouTube, Vimeo, Instagram, Facebook, Twitter or Issuu 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 VideoOrSocialPostEmbed runs. You can control the order that text formatters are run in by drag/drop sorting in the field editor. Copyright 2018 by Ryan Cramer / Updated by Lex Sanchez

Hi, I'm having an issue with TextFormatterVideoEmbed. Never had any problems with this before but it's not picking up the Youtube or Vmeo urls when it's in <p> tags, as it should do. Has anyone experienced this too? I'm using PW v3.0.165, TextFormatterVideoEmbed v1.1.1 in CKEditor (core within PW 3.0.165). Thanks Warran

Adding the native lazy load loading='lazy' on the 381 line of TextformatterVideoEmbed.module doesn't seem to lazy load the iframe. I can see the attribute on the page's code that is injected but all the YouTube scripts are loading on the initial page load even through the embed video is about 2000+ pixels from top. What am I missing??? EDIT: All the Chromium browsers have a very large threshold. On Mozilla the threshold is much lower and the iframe gets loaded when you're getting close to it at about 500px.

Hi @joshua, I am getting the following error while trying to implement cookie consent for a Youtube iFrame: Uncaught TypeError: "text/javascript".poster is undefined What am I doing wrong? I tried both Ryan's TextFormatterVideoEmbed and manually adding all the attributes. All works fine but the src of the iframe is never resolved which I guess is due to the error above. Any help is appreciated thanks Edit: I am pretty sure this is caused by an error/missing semicolon in the PrivacyWire JS. Not sure how this works for anyone??

@joshua I have read the documentation. Sorry, no banner is displayed for me after I confirmed it once days ago. Unfortunately, in none of three browsers (macOS). At Klaro there is a possibility to keep the dialog visible via a code https://example.com#klaro-testing. How do I get to see it on PrivacyWire? Functionality: What do I do after installation, how do I add these following Processwire modules / functions: OpenStreetMap (FieldtypeLeafletMapMarker, InputfieldLeafletMapMarker, MarkupLeafletMap) Video embed for YouTube (and Vimeo) (TextformatterVideoEmbed) In the documentation I read: "When you want to load specific scripts ( like Google Analytics, Google Maps, ...) only after the user's content … add 'data-category="statistics"'" The module for OpenStreetMap is integrated like this: <?php $map = wire('modules')->get('MarkupLeafletMap'); ?> <?php echo $map->getLeafletMapHeaderLines(); ?> I can't add anything, if I haven't overseen something? In the TextformatterVideoEmbed options I have this GDPR option: [ ] GDPR: Use the no-cookie / do-not-track version of video URLs but no possibility to extend the module code as shown in the documentation. I am probably completely wrong with my assumption that this is the way to connect things to PrivacyWire? Sorry if I oversaw something, the more I read the more it confuses me. Maybe it will work sometime, to enable installed things like TextformatterVideoEmbed in PrivacyWire, and done ? Thanks for the module, I'm just struggling a bit with the functionality.

Vimeo private video url's in combination with GDPR activated Vimeo introduced a hash parameter (h) that gets added to private video URL's in order to be embedded. The dnt=1 parameter does not get added anymore, if the GDPR checkbox is checked in the TextformatterVideoEmbed modul settings. In class TextformatterVideoEmbed I had to change the following code (line 284) from: $embedCode = str_replace( "?app_id=", "?dnt=1&app_id=", // add do-not-track parameter $embedCode ); to: $embedCode = str_replace( "app_id=", "dnt=1&app_id=", // add do-not-track parameter $embedCode );

@Marty Walker @Robin S @Mats Could you try the attached version of the module and see if it helps with your issues with Vimeo URL formats? Robin, Mats (I hope I got the right one), I've included you both as you have a similar issue open on the repo. TextformatterVideoEmbed.module

I haven't dug too deeply into this yet, but is I saw there is supported integration with TextformatterVideoEmbed - I'm wondering if this could apply to either TextformatterOembed / FieldtypeOembed postprocessing as well, or if that requires more fine tuning because of how different providers may offer different embedded content. Perhaps all of these fall under external-media?

EDIT: found the problem! | orig. post -------------------------------------------------------------> I have a need to manually use the textformatters of VideoEmbed and PrivacyWire. As far as I understand it, it should be possible to do it with VieoEmbed first and PrivacyWire second. But it seems not to match with the video I tried. My code is: // A) $videoMarkup = "<p>{$blogitem->blog_video_url}</p>"; // B) $mod = wire('modules')->get('TextformatterVideoEmbed'); $mod->format($videoMarkup); // C) $mod = wire('modules')->get('TextformatterPrivacyWire'); $mod->format($videoMarkup); Debug outputs are: // A) array(1) { ["$videoMarkup"] string(49) " <p>https://youtu.be/XXXXXXXXXX</p> " } // B) array(2) { ["Textormatter"] object(ProcessWire\TextformatterVideoEmbed)#458 (1) { ["data"] array(7) { ["maxWidth"] int(640) ["maxHeight"] int(480) ["responsive"] int(1) ["rewind2start"] int(1) ["clearCache"] string(0) "" ["uninstall"] string(0) "" ["submit_save_module"] string(8) "Absenden" } } ["$videoMarkup"] string(492) " <div class='TextformatterVideoEmbed' style='position:relative;padding:30px 0 56.25% 0;height:0;overflow:hidden;'><iframe style='position:absolute;top:0;left:0;width:100%;height:100%;' width="640" height="360" src="https://www.youtube.com/embed/XXXXXXXXXX?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> " } // C) array(2) { ["Textormatter"] object(ProcessWire\TextformatterPrivacyWire)#491 (1) { ["data"] array(5) { ["open_tag"] string(2) "[[" ["close_tag"] string(2) "]]" ["video_category"] string(14) "external_media" ["uninstall"] string(0) "" ["submit_save_module"] string(8) "Absenden" } } ["$videoMarkup"] string(492) " <div class='TextformatterVideoEmbed' style='position:relative;padding:30px 0 56.25% 0;height:0;overflow:hidden;'><iframe style='position:absolute;top:0;left:0;width:100%;height:100%;' width="640" height="360" src="https://www.youtube.com/embed/XXXXXXXXXX?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> " } Is it wrong how I used it, or why isn't it working as expected, or where can I look into to find the reason? <------------------------------------------------------------ orig. post | EDIT: To answer my own question: "Yes I used it wrong!" ? // C) $mod = wire('modules')->get('TextformatterPrivacyWire'); $mod->format($videoMarkup); This was wrong. The TextformatterPrivacyWire module only supports the method ->formatValue(), not ->format(). The following line works and now the result is as expected: $mod->formatValue(new Page(), new Field(), $videoMarkup); So, just wondering why it not uses the format() method, because there seems no need for a page and a field?

This is my very first module, and I'm sure it needs a lot of improvements, so I'd like to get some feedback. I've kept it as simple as possible to fit my basic needs. Adapted from Ryan Cramer's TextformatterVideoEmbed, this TextFormatter module replaces plain YouTube links pasted in a CKEditor field with Paul Irish's blazing fast Lite YouTube Embed script: https://github.com/jacmaes/TextformatterLiteYouTubeEmbed Why? The Lite YouTube Embed script is indeed a lot faster than the standard iframe embed. The difference is pretty spectacular when you need to embed a series of videos. It's also more private as it uses youtube-nocookie.com (so no need for a cookie banner).

Thank you for your response Processwire 3.0.210 Duplicator FieldtypeColor FieldtypeFontIconPicker FieldtypeRepeaterMatrix FileValidatorSvgSanitizer FormBuilder GoogleClientAPI ImageExtra InputfieldColor InputfieldFontIconPicker MarkupFontIconPicker MarkupSimpleNavigation PageimageSource PageSnapshot PasswordForceChange ProCache ProcessAdminActions ProcessDuplicator ProcessExportProfile ProcessJumplinks ProcessLanguageFieldExportImport ProcessProCache ProcessVersionControl ProcessWire dev ProcessWire master ProcessWireUpgrade RestApi Sassify SeoMaestro SimpleContactForm TextformatterHannaCode TextformatterVideoEmbed VersionControl Yes, with a random URL that isn't linked to any page, it works (or using the URL of a deactivated language) The 404 template exists No redirects in the 404 template Yes, 27 No URL segments No hooks One site Multi-language I can't of anything fancy to the configuration that might cause that issue.

I'm in process of upgrading PW 2.5.4, PHP 5.6.8 and using TextformatterVideoEmbed version 109. When I upgrade this module to the latest version 111 I get Compile Error: Cannot make static method ConfigurableModule::getModuleConfigInputfields() non static in class TextformatterVideoEmbed (line 18 of \site\modules\TextformatterVideoEmbed\TextformatterVideoEmbed.module) Is it possible that this method is problematic? version 109: public static function getModuleConfigInputfields(array $data) { version 111: public function getModuleConfigInputfields(array $data) {

Just gave it a try and this is the response I get from YouTube when not using HTTPS: { "error": { "code": 403, "message": "SSL is required to perform this operation.", "status": "PERMISSION_DENIED" } } Happens on 3.0.148 as well as 3.0.165. The way TextformatterVideoEmbed is set is that if it doesn't get a proper response (one with "html" key) it won't do anything, so this is technically expected behaviour. That being said, I don't see any reason why this module should use the HTTP protocol even if the site itself does, and since YouTube no longer seems to allow that it's definitely not the right thing to do. I've opened an issue for this for @ryan: https://github.com/ryancramerdesign/TextformatterVideoEmbed/issues/16 ?

Hello, Was hoping someone could help I started getting these errors SQLSTATE[22007]: Invalid datetime format: 1366 Incorrect string value: '\xD0\xB2 \xD0\xA0\xD0...' for column `db_name.`textformatter_video_embed`.`embed_code` at row 1 (in /site/assets/cache/FileCompiler/site/modules/TextformatterVideoEmbed/TextformatterVideoEmbed.module line 111) I am not sure if my server was updated or its something else, was working fine for years without any issues

Render oEmbed data from YouTube/Vimeo URLs... or TextformatterVideoEmbed for power users. https://github.com/nbcommunication/TextformatterVideoMarkup The use case... On an upcoming project, we want to be able to render YouTube/Vimeo URLs as thumbnail images, that when clicked open up in a (UIkit) lightbox. Additionally, we want to be able to specify the thumbnail image - as part of a RepeaterMatrix block which contains a URL field (video) and an Image field (thumb). The result is this module, which allows you to specify the markup used to render the oEmbed data: The formatter can be used on any Text field e.g. Text, Textarea (CKEditor or not), URL etc. Global configuration options are available (e.g. rel=0), based on TextformatterVideoEmbedOptions. An 'empty value' can be specified for URLs that do not return data from the oEmbed endpoint The render method is hookable, allowing you to customise rendering on a per page, per field basis Plenty more information here ? https://github.com/nbcommunication/TextformatterVideoMarkup/blob/master/README.md Back to the use case... How do we render the thumbnail and then use the image from our Image field? In the module config Markup field: <figure data-uk-lightbox> <a href="{url}" data-poster="{thumbnail_url}" data-attrs="width: {width}; height: {height}"> <img src="{thumbnail_url}" alt="{title}"> </a> </figure> Then in site/ready.php <?php $wire->addHookBefore('TextformatterVideoMarkup::render', function(HookEvent $event) { // Arguments (for info) $tpl = $event->arguments(0); // string: The markup template $data = $event->arguments(1); // array: The oEmbed data $url = $event->arguments(2); // string: The requested URL $emptyValue = $event->arguments(3); // string: The empty value used if no data is returned // Object properties (for info) $page = $event->object->page; // Page: The page $field = $event->object->field; // Field: The field $html = $event->object->html; // bool: Is it HTML being parsed, or plain text? // Replace the thumbnail image if($field->name == 'video' && $page->hasField('thumb') && $page->thumb) { $data['thumbnail_url'] = $page->thumb->url; $event->arguments(1, $data); } }); The module requires PW >= 3.0.148 and PHP >= 7. It probably doesn't need to, but the expectation is that power users will be able to meet these requirements! The module is also Beta - please don't use in production yet. I suspect there will be edge cases related to the changes I made to the URL regexes from TextformatterVideoEmbed - so far though they are working for me. If you come across any issues please let me know! Cheers, Chris

@teppo Thanks alot for your PR with the TextformatterVideoEmbed integration! I tested and merged your PR today. I like the idea of adding more and more integrations with other modules like TextformatterVideoEmbed.

@cb2004 Well my preference would have been that CKEditor continue developing and improving CKEditor 4, but now that I've worked with TinyMCE 6 for 3 weeks it's been a pleasant surprise and even more of an upgrade than I think CKEditor 5 would have been. TinyMCE comes with a media plugin and toolbar. Though I've not used it and am guessing you'd have to turn off the Purifier option in order to use it (since it would insert iframes or scripts). I don't think iframes and scripts belong in richtext since it would be very difficult to discern malicious scripts from legit scripts. So I'd rather just disallow them completely (which is one thing Purifier does). Basically, embedding social media or media players directly in markup from a richtext editor opens a lot of security concerns. On the other hand, using modules like TextformatterVideoEmbed, HannaCode, or others that let you embed service specific stuff — this is a good way to do it. It's relatively simple to convert the embed scripts/codes from nearly any social media service into a HannaCode, and even simpler if there's a dedicated module for the service you are wanting to use. So for your client, I would ask them which social media posts they are looking to embed, find out the company's recommend way of doing that, and convert it to a HannaCode, dedicated Textformatter module (one of the simplest kind of moodules to make), or even just ready.php hook after FieldtypeTextarea::formatValue. I think you'll find that configuring individual TinyMCE fields is very simple and there's not really much, if anything at all, to converting a field using CKEditor to one using TinyMCE. I thought that I could also have TinyMCE recognize some of the CKEditor settings and convert them automatically (like toolbar, available headlines, and plugins). On the other hand, I think it's better to configure TinyMCE yourself as there's a lot of useful stuff that wasn't there with CKEditor. But if you just want to convert a defaults configured CKEditor field to a defaults configured TinyMCE field, there's basically nothing to it other than selecting "TinyMCE" rather than "CKEditor" for the "Inputfield type" (Textarea field settings dropdown on the Details tab). One of the nice things about changing a CKEditor 4 field to TinyMCE is that saving a page with an existing value doesn't usually result in any changes to the markup value. CKEditor 4 and TinyMCE 6 seem to markup things exactly the same, just plain simple HTML. Also I should mention that CKEditor 4 isn't going to stop working at any point either. I've been thinking that both TinyMCE and CKEditor will live in the core until CKEditor 4 is completely EOL, and at that point it'll move to a 1st party module. So there won't ever be a case where you will be required to convert all of your CKEditor to TinyMCE fields, unless you want to. In my case, I'll probably keep some installations using CKEditor 4 until it needs some other kind of major development or redo. ProFields Combo, Table and Textareas will all support both CKEditor 4 and TinyMCE 6. I don't see any reason to ever drop CKEditor 4 support in ProFields. So long as the module is installed, it'll be selectable as an option. I'll be adding TinyMCE support to these modules soon as well. @Ivan Gretsky Thanks for testing it out! The intention is that everything works just as before, so there isn't any learning curve. HTML Purifier is enabled by default unless you turn it off (in "Features"). This is what cleans the markup server-side. Since you mention pink H1s, I'm wondering if you instead mean CKEditor's ACF (advanced content filter)? TinyMCE has something similar (content filtering) that can be configured with various settings like valid_elements, valid_children, valid_styles, invalid_styles, and many others. InputfieldTinyMCE uses the defaults for most of these, but the one that I've focused on as a configurable setting with the module is invalid_styles which is exactly how you could prevent pink H1s, by just typing the word "color" and "background" and "background-color" into your "Invalid styles" setting. It's also a good idea to instruct clients on how to "paste as plain text", or add the plain text paste option to your toolbar (I think it's already in the menubar). If you want even more control over how content is pasted without any instruction to the client, TinyMCE has pretty much thought of everything here, see Copy/paste options. As far as I know, we didn't have this level of control with CKEditor. There's not much to add here as there's little or nothing to it unless you've spent a lot of time really tweaking CKEditor settings and custom plugins, etc. And for those cases I would probably just keep using CKEditor 4. But I do plan to have TinyMCE recognize CKEditor settings for toolbar, plugins and block formats, and automatically convert them where there are equivalents. Though I worry a little that by doing that, some might skip over doing any of their own configuration, and thus miss a lot of new options. I'm going to detail how to build simple plugins in a related blog post. I was thinking of a simple HannaCode insert plugin as a good example. Not as powerful as HannaCodeDialog, but rather just a simple example to get module authors started. The module also comes with a really simple plugin example named hello that just alerts "Hello" every time you click a button on the toolbar or menubar, but this obviously isn't useful for anything other than being a starting point.

Okay, I'm a noob to PW, as well as this module, and cannot figure out how to simply loop through a few videos that I have in a textarea field. Here's the code I'm using (that's probably wrong): <?php foreach($page->videos as $video) { echo '<div class="lazyload">' . $video . '"></div>'; } ?> I get this error on my page and can't figure out how to fix it: : Invalid argument supplied for foreach() in I'm a noob with PHP too and haven't quite figured out the foreach loop yet. I've looked at the PW documentation but haven't (quickly) found anything that explains it in detail. Any help would be much appreciated. FYI, I'm using the module TextformatterVideoEmbed as well to parse the videos from Youtube. I basically just have them listed in my page's textarea like this: <p>https://youtu.be/x0AHpsFVC9w</p> <p>https://youtu.be/x0AHpsFVC9w</p> <p>https://youtu.be/x0AHpsFVC9w</p> <p>https://youtu.be/x0AHpsFVC9w</p> Obviously they'll be unique links once the page goes live. The TextformatterVideoEmbed module requires them to be in <p> tags before exporting them to the page or I would just use the <p> or some other tag in the template file.

Wondering how to get that A+ rating on Mozilla Observatory? Now you can with ⭐⭐⭐MarkupContentSecurityPolicy⭐⭐⭐ Of course, MarkupContentSecurityPolicy does not guarantee an A+ rating, but it does help you implement a Content Security Policy for your ProcessWire website. Markup Content Security Policy Configure and implement a Content Security Policy for all front-end HTML pages. This module should only be used in production once it has been fully tested in development. Implementing a Content Security Policy on a site without testing will almost certainly break something! Overview Website Security Auditing Tools such as Mozilla Observatory will only return a high score if a Content Security Policy is implemented. It is therefore desirable to implement one. A common way of adding the Content-Security-Policy header would be to add it to the .htaccess file in the site's root directory. However, this means the policy would also cover the ProcessWire admin, and this limits the level of security policy you can add. The solution is to use the <meta> element to configure a policy, for example: <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">. MarkupContentSecurityPolicy places this element with your configured policy at the beginning of the <head> element on each HTML page of your site. There are some limitations to using the <meta> element: Not all directives are allowed. These include frame-ancestors, report-uri, and sandbox. The Content-Security-Policy-Report-Only header is not supported, so is not available for use by this module. Configuration To configure this module, go to Modules > Configure > MarkupContentSecurityPolicy. Directives The most commonly used directives are listed, with a field for each. The placeholder values given are examples, not suggestions, but they may provide a useful starting point. You will almost certainly need to use 'unsafe-inline' in the style-src directive as this is required by some modules (e.g. TextformatterVideoEmbed) or frameworks such as UIkit. Should you wish to add any other directives not listed, you can do so by adding them in Any other directives. Please refer to these links for more information on how to configure your policy: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy https://scotthelme.co.uk/content-security-policy-an-introduction/ https://developers.google.com/web/fundamentals/security/csp/ Violation Reporting Because the report-uri directive is not available, when Violation Reporting is enabled a script is added to the <head>which listens for a SecurityPolicyViolationEvent. This script is based on https://developer.mozilla.org/en-US/docs/Web/API/SecurityPolicyViolationEvent and POSTs the generated report to ?csp-violations=1. The module then logs the violation report to csp-violations. Unfortunately, most of the violations that are reported are false positives, and not actual attempts to violate the policy. These are most likely from browser extensions and are not easy to determine and filter. For this reason, there is no option for the report to be emailed when a policy is violated. Instead, you can specify an endpoint for the report to be sent to. This allows you to handle additional reporting in a way that meets your needs. For example, you may want to log all reports in a central location and send out an email once a day to an administrator notifying them of all sites with violations since the last email. Retrieving the Report To retrieve the report at your endpoint, the following can be used: $report = file_get_contents("php://input"); if(!empty($report)) { $report = json_decode($report, 1); if(isset($report) && is_array($report) && isset($report["documentURI"])) { // Do something } } Debug Mode When this is enabled, a range of information is logged to markup-content-security-policy. This is probably most useful when debugging a reporting endpoint. Additional .htaccess Rules To get an A+ score on Mozilla Observatory, besides using HTTPS and enabling the HSTS header, you can also place the following prior to ProcessWire's htaccess directives: Header set Content-Security-Policy "frame-ancestors 'self'" Header set Referrer-Policy "no-referrer-when-downgrade" Installation Download the zip file at Github or clone the repo into your site/modules directory. If you downloaded the zip file, extract it in your sites/modules directory. In your admin, go to Modules > Refresh, then Modules > New, then click on the Install button for this module. ProcessWire >= 3.0.123 is required to use this module.

@PWaddict I also think you shouldn't use javascript, instead do the formatting on the server. I feel I wouldn't trust the JS solution because it might not work as expected under certain circumstances. I put together a regular expression which might help you build another Textformatter which replaces "src" with "data-src" if thats the only thing to do: Have a look at the demo here: http://www.phpliveregex.com/p/jkp (On the right, click on preg_replace to see the replacement.) This is the code: <?php preg_replace("/(<iframe.*)src(.*)(youtube|vimeo)/", "$1data-src$2$3", $input_lines); (During my research I learned from: http://stackoverflow.com/questions/4898192/preg-replace-how-to-replace-only-matching-xxx1yyy-pattern-inside-the-selector) Hope that helps, if you need more advice you can also DM me and we will post the result later - cheers! PS: Or like @tpr mentioned you may put that modification directly into a copy of TextformatterVideoEmbed. That way you would have more control. (TextformatterVideoEmbed itself gets the embed code from an oembed url, so you can't easily intercept there ...) PPS: Oh, actually a simple str_replace("src=", "data-src=", $embedCode) in a copy of TextformatterVideoEmbed might actually be sufficient!

Right - as part of my efforts to show off more of the work we've done recently, here's a site we launched earlier this year. On The Record are a not-for-profit that specialise in oral histories and creative media. We've done a few nice projects with them ( A Hackney Autobiography was a lovely project we did with them in our pre PW days). A creative design was very important to them as well as being accessible and usable. There's not too much bespoke backend coding going on. We needed to provide them with a way of easily adding audio and video files but that was mostly done using normal fields and a modified version of Ryan's TextformatterVideoEmbed module adapted for use on plain text fields. Apart from that, it's just the usual supects for extra modules: ProCache LoginPersist and Macrura's ProcessDocumention module which we normally use for provide help pages in the admin area. The front end is pretty much bespoke but with a few components lifted from various places; looks like we used Bootstrap grid for one. It's another site where we used CSS filter properties to apply a consistent look and feel to images the client uploads. I think it looks nice anyway and the client is very happy with it and took to using the PW admin with no problems.

This is my dumb question for the week. ? I like to clean up unneeded server files... and over time I see a few duplicates with a "." in front of the name... with duplicates below that don't have the leading dot - I assume the .dotVersion is a saved version after a more major upgrade. Should I delete the .TextformatterVideoEmbed ? Any reason to keep it?

@Warran Yes, yes and yes As in my original post, both the page & repeater matrix field use the 'body' field. It's a textarea with CKEditor + TextformatterVideoEmbed and the body content source code is the same