Embedding Video in WordPress

I can’t keep up with video embedding in WordPress. It changes, it breaks, I try and keep things simple.

A few tests to embed video from flickr and zenfolio. These are mp4 files created by motion for a Vivotek IP webcam.

Zenfolio: Using the Share Embed Code

This is using the embed code from the Share option in Zenfolio. Need to be logged into zenfolio. The code is added to the page (Gutenberg editor) using the Custom HTML option in the Formatting section. The embed code that Zenfolio supplies is:

<p><iframe src="//www.zenfolio.com/zf/core/embedvideo.aspx?p=c9dd8a90.11" width="800" height="500" frameborder="0"></iframe></p>

This seems to work ok on desktop, Firefox. But no ability to play full-screen or link through to original on zenfolio. Also not so sure about the responsiveness on a smartphone. In fact looks a bit broken overall on iPhone.


Zenfolio: Direct link to video

This is using the Share option available to the owner when logged into Zenfolio. There’s a range of sizes/qualities linking to the original mp4. Quality differences not that relevant for a webcam but I’ve used the best one anyway. In the following example I’ve used the Video option under Common Blocks and selected Insert from URL.

This seems to work as good as the embedded code but with perhaps a bit more buffering. You can click through to full-size, but not to the original zenfolio page. And still pretty broken on an iPhone.


Flickr: Using the Share Embed Code

Like the zenfolio example above, this uses the Share option available only when logged in. The Embed code, added using the Custom HTML option is:

<a data-flickr-embed="true" data-header="true" data-footer="true"  href="https://www.flickr.com/photos/djnisbet/32746907647/" title="phoenix - gardenpath - event5177 - Tue 23 Apr 2019 - 0748 - 32s930ms(no sound)"><img src="https://live.staticflickr.com/31337/32746907647_b91a271a6b_o.jpg" width="1280" height="800" alt="phoenix - gardenpath - event5177 - Tue 23 Apr 2019 - 0748 - 32s930ms(no sound)"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
phoenix - gardenpath - event5177 - Tue 23 Apr 2019 - 0748 - 32s930ms(no sound)

On Firefox (66.0.3 (64-bit)) running on Debian (Private Window and Cookies Cleared) this gives:

No video with supported format and MIME type found.

This also happens under Firefox (Windows 10), whereas Edge has a bold overlay that states: This type of video file isn’t supported. This is the same video file that I uploaded to both Flickr and Zenfolio, so presumably they are handled, stored or delivered in some subtly different way.


Flickr: Using the built-in Gutendberg Embeds

phoenix - gardenpath - event5177 - Tue 23 Apr 2019 - 0748 - 32s930ms(no sound)
Using the Flickr option under Embeds

Well this is interesting. Is there a difference between pre and post Smugmug Flickr? A lot of migration has been going on after SmugMug bought Flickr, and I wonder if it’s videos either side of that migration that are causing the fun.

Here’s some iPhone footage taken on the River Wear in Feb 2018. It seems fine using the Flickr Embed option.

Flickr: iPhone video uploaded in Feb 2018

2018-02-13 17.04.03

Now here’s some iPhone footage, (same iPhone), taken recently and uploaded to Flickr. Using the same Flickr Embed option.

Stepping Stones - 2019-02-23 09.04.56

Same Camera, same embedding technique. One works, the other doesn’t. The only difference is the time they were uploaded. Let’s try that test again.

Here’s another clip from the garden path webcam from Jan 2019. And it works fine.

phoenix - gardenpath - event1488 - Sun 06 Jan 2019 - 091438 - no_audio - 27M

Finally a couple of examples using the photonic plugin. Same story. It works for video uploaded before the migration, but not after.

Before …

2018-02-13 17.04.03

2018-02-13 17.04.03

and after …

Stepping Stones - 2019-02-23 09.04.56

Stepping Stones - 2019-02-23 09.04.56

Time and Patience are not waiting for me and my experience of Flickr has always been exasperating. I had a legacy Pro account but with the acquisition by SmugMug the cost of that has jumped and I don’t think it’s worth the money. I’ll probably not renew my Flickr Pro subscription in May and stick with Zenfolio. My Vimeo Plus was great for its video sharing but a bit of an overkill for people like me who just want to potter about with smartphones and webcams. But then, the money saved by not paying for Flickr. Hmmm ….

what a mess

What’s happened here is that I’ve had two poorly maintained blogs and I’ve crudely welded them together into one.

This blog is now a messy tramsmash of www.bluecedar.org.uk and katsura.org.uk.

The basics were simple enough:

  1. Create new self-installed WordPress blog (this one)
  2. Export everything out of bluecedar.org.uk (Tools/Export)
  3. Export everything out of katsura.org.uk (Tools/Export)
  4. Import into katsura.uk (Tools/Import)

Step 4. required installing a plug-in but that was no big deal.

It’s a mess, but it’s a nice mess.

WordPress comments in unlikely places

I’ve just been puzzling over a comment that appeared on my katsura blog. An email had indicated that a comment was waiting my approval. I read it, and approved it. Interesting, I thought. I shall reply to it. So, er, where the hell was it?

I searched and searched and couldn’t find. it. Perhaps it hadn’t appeared? Perhaps it was something to do with the usually wonderful akismet plugin? I dropped into the University of Google and started searching for articles about non-appearing wordpress comments. No shortage of them. But, none of them seemed right. Many talked about re-installing themes, and a frustrating number terminated inscrutably with “Topic Closed” with no tell-tale [SOLVED] in the title.

So I looked again at the comment. Where exactly was it? Hmmmm, indeed, what exactly was it commenting on? Now that I looked at it more closely, it wasn’t commenting on a post at all, it was commenting on a photo! What the hell was going on?

Eventually I found it. It was a comment to a photo, and the photo had its own attachment page (whatever that is). This is the photo, and it seems that my commenter had found themselves there directly, rather than on the corresponding post. My guess is that, because I use meaningful tags and filenames on my images, my visitor had googled for katsura pests, or something similar, and the photo had appeared at the top of the listing.

Right, I’d discovered what had probably happened, and the fact that it was possible to comment on attached photos, now I had to figure out what to do about it. I could leave the comment there, but it didn’t show up anywhere on the blog page. Not under Recent Comments anyway. So the best thing to do would be to move it. There’s bound to be a way to do that easily in WordPress.

Well, no there’s not. Not easily anyway. Not to worry, there’s bound to be a plug in. Or two. I tried two plugins, and neither of them moved the stubborn post. I could cut and paste it myself I suppose, but I didn’t want to do that.

Eventually I found some SQL in an article that’s around in a few places. I had a look at the SQL and started up phpmyAdmin which was altogether friendlier. The SQL looked daunting at first but it was basically just tweaking a couple of numbers and it all made sense. It’s quite good doing it in phpMyAdmin and watch the SQL it constructs to get the feedback that things are going ok. I nearly got caught out by forgetting to update the comment counts, and when you get to that bit, I found the Total Comment Count for the old post bit was irrelevant, as there was no ‘old post’ for it to have commented on.

Things looked better. Neat and Tidy. And I thought I’d round things off by installing a WordPress plugin that promised not to allow such things to happen again. But I got cold feet. WordPress warned me that it hadn’t been tested on my version (3.2.1), and that it was only compatible up to version 3.0.5. I know how to fix it now, and if it remains infrequent, then I’ll do it the SQL way.

delicious tag cloud

I can see some possibilities here. Now that I use cloud-based tags over browser bookmarks this could be pretty interesting. Unfortunately my delicious tags are a mess. And you are never quite sure what delicious/yahoo are gonna do next …

Some very nifty looking delicious plugins to investigate. But not at the moment.

Upgrading wordpress

Well that was a brief moment of unease. Still new to the whole wordpress world I logged on to see a message advising me to upgrade to 3.1.3 and reminding me to backup before proceeding. Yeah, whatever. I’d only just started so hadn’t that much to backup. Plus I was a bit lazy.

I could download 3.1.3 myself or get wordpress to DIY. I chose the latter and all looked well until I tried to login again and:

Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.

That brought me down to earth with a bump and I consulted the University of Google on the message. Lots of references to .htaccess files and problems with add-ons, all of which sounded like hard work. Looking for an easy fix I had a look at my error logs and found lots of Premature end of Script errors and references to various .php files. I had a déjà vu moment and remembered the original tips I’d read on this blog when I was originally struggling with installing wordpress in the first place. Sure enough, same old same old.

Running:

find . -name "*.php" -exec chmod 755 '{}' ;
chmod 600 wp-config.php

does the trick.