.mp4 videos don't properly embed

[bencbartlett]

Have you checked that your issue isn't already filed?

• [X] I read through FAQ and searched through the past issues, none of which addressed my issue.
• [X] Yes, I have checked that this issue isn't already filed.

Bug description

Videos don't play when embedding in a webpage

How to reproduce the bug

I wrote a blog post recently and wanted to embed videos, but the videos won't play on Chrome or Safari I'm not sure why: https://bencbartlett.com/blog/gyroscope-led-totem/ (I'm referring to the locally hosted videos; everything after the first YouTube video, which works correctly)

Strangely, if you right click any of the videos and click "Open video in new tab", the videos display correctly, so I don't think this is an encoding issue. The source for the blog post is here, and the relevant video files are in this directory.

I have other pages on my site that correctly display video. The videos were converted from .mov videos taken with an iPhone to .mp4 files to save space using this resizer.py script.

Error messages and logs

The error message you got, with the full traceback if available. Please paste it between these triple backticks.

What operating system are you using?

Not applicable (e.g. you're using GitHub Pages or other hosting)

Where are you seeing the problem on?

Running locally with Docker, Running locally without Docker, Deployed site

More info

No response

[george-gca]

Not sure if we can do anything about it, since for me it works just fine the video embeds (tested both Firefox and Chrome on Ubuntu). Try to access your website from this site and check it: https://www.locabrowser.com/. It worked when I selected USA as country.

[bencbartlett]

I don't see the video as embedding -- I'm not referring to the YouTube video at the top, but every other video doesn't embed properly..

[george-gca]

Have you tried the site I sent? I saw the same view in all 3 tests above, and all videos could be played:

[scottleechua]

From the Philippines, the videos also don't load. This indeed seems like a particularly geography-dependent issue. Other folks using GH Pages to serve repo-hosted videos have reported similar issues, e.g., here and here.

(I'm not sure if repo-hosted audio files face a similar issue.)

@bencbartlett perhaps I can pass on the recommendations listed in jekyll-embed-video:

Embed YouTube, Vimeo, Twitch, Facebook, Instagram, Twitter, TikTok, Streamable, Google Drive videos/clips and more in Jekyll webpages without a plugin. If you are hosting your webpage using GitHub Pages, you can't use third party plugins. Here is a method to use "includes" instead of plugins.

and the demo site here shows which methods still work.

@george-gca would you be open to a PR that builds off jekyll-embed-video so the template can provide users with more video hosting options?

[george-gca]

Checking their source code it doesn't seem to do anything that different from our _includes/video.liquid. Does their solution work for your case (location) whilst our doesn't?

Case yes, I believe the best solution would be to embed them all in our _includes/video.liquid file. We could do something like checking the url (if it is from youtube, etc) and them selecting the correct css attributes that goes with it.

[scottleechua]

You're right, the video embed code is very standard -- it's more that Github-hosted videos really don't load well in my case, whereas the embedded videos work just fine.

(Also tested Singapore, Hong Kong by VPN --- Github-hosted videos have the same "audio plays but video is black" issue, while embeds work similarly well.)

So my proposal is indeed as you say, to review _includes/video.liquid to standardize how embedded videos are displayed, and to update the sample blogpost accordingly.

[george-gca]

I don't think I understand what are the changes then. Is there a way to make Github-hosted videos work in your case?

[bencbartlett]

I've tested this using locabrowser on multiple different physical devices now and still get the same result - audio plays while vidoe is black. I'm also confused why other github-hosted videos on my site don't have this same problem, but every video on this page does. I used ffmpeg to convert from iPhone .mov to .mp4 in both cases (it's possible I may have used different arguments but I don't think this is the case especially since the broken embeds play properly if you open them in a new tab). Looking online it sounds like this is a somewhat common issue for videos hosted on Github.

[george-gca]

Looking online it sounds like this is a somewhat common issue for videos hosted on Github.

Can you add some references to this, so other users can be aware of this?

[bencbartlett]

I fixed this problem with this workaround commit that just directly embeds the videos instead of using {% include video.html %}. This bypasses the video formatting CSS and the videos display correctly, indicating that the embed bug is probably somewhere in that code and that this isn't a video formatting issue. (Why the embed code seems to work fine on the other page is confusing to me though...)

<!-- {% include video.html path="/assets/img/gyroled/scaled/servo_mount_printing.mp4" class="img-fluid rounded z-depth-1" controls=true autoplay=false%} -->
<video style="width:100%" src="/assets/img/gyroled/scaled/servo_mount_printing.mp4" controls=""></video>

[george-gca]

Can you check what differences exists between the two built versions? Also comparing with the page that works just fine? Maybe this can give a clue about what is wrong.