It can be tricky to run integration tests targeting a web server using the command line. Essentially, we need to: Start the applicati...
JavaScript npmI was trying to get a global .NET Core tool working on my development machine, which just so happens to be running macOS. I also work wit...
.NET macOSWe’ve moved around CSS frameworks in the past few years, Semantic UI for our application layer, and Bootstrap for our static sites. As ou...
SASSNew to the frontend at RIMdev, or looking for more about our Frontend team? Here’s a quick overview of our team, tools, and culture! As ...
Team RIMdev FrontendSimple transitions Vue.js has an extremely helpful was to handle animations in web apps. In a simple example if we want to display somet...
Vue.js JavaScript AnimationsAs web applications have gotten more complex, so has the technologies used to build them. Magic can be good when all works as intended, b...
Webpack JavascriptWe’re in the process of scaffolding out our Microsoft Azure environments using Terraform. We’re looking at deploying consistently from ma...
Azure TerraformRequirement ASP.NET Core 2.2 or 3.0 Why can’t I do this in earlier versions? Read ASP.NET Core 2.2 First Look – Endpoint Routing ...
ASP.NET Core Routing MiddlewareHealth checks in ASP.NET Core are useful for reporting the health of your ASP.NET Core web application. But, this functionality can’t dir...
.NETAs I’ve walked through upgrading a number of solutions to target a new version of the .NET Framework, I’ve compiled a list of helpful ste...
.NETWhat is WSL? Windows Subsytsem for Linux (aka WSL) is an excellent tool for running Linux-based binaries natively in Windows. With the i...
WSL git ASP.NET MVCIn development it is common to not want to share everything in our code. Things like usernames, password, links to an api, and more shoul...
Vue.js JavaScript WebpackIn Vue computed properties are a life saver when it comes to being able to add logic to data that we need to use in the UI. We want to ke...
Vue.js JavaScriptUpdated Solution! Thanks for the post!If you don't want to create a web.config, you can also drive this through the <AspNetCoreHo...
asp.net asp.net coreI, Khalid Abuhakmeh, recently wrote about my [Razor Pages first impressions][khalid] and am mostly positive about the addition to the ASP...
asp.net asp.net core razorWe’re in the process of scaffolding out our Microsoft Azure environments using Terraform. While Terraform does an excellent job creating ...
Terraform OSSTL;DR Explicitly using SqlBulkCopy might never cause this problem since mapping is done manually, but NPoco’s usage does automatic map...
NPoco SqlBulkCopyAs you’re building out an API it’s important to keep response times in check. In many cases slowness is due to database calls, web reques...
Benchmarking OSSWe’ve accomplished so much this year thanks to @VueJS that we wanted to give back to the Vue community in some way. Ritter IM is sponsor...
VueJSEgg Fried Rice is a homey dish in China. In this post, I am going to show you my method to make this simple, quick, and delicious dish. E...
Food chinese cuisineMost of our web properties run on jekyll, ebrokersoftware.com, theagentsurvivalguide.com, and more slated for the coming year.
The RIMdev blog lets up both document and play with what may, or may not, work.
Glad you asked! We currently check the post front matter and, if image: is listed, serve accordingly.
{% if page.image %}
{% assign postImage = page.image %}
{% elsif post.image %}
{% assign postImage = post.image %}
{% else %}
{% assign postImage = site.default_image %}
{% endif %}
Why page AND post? Our main page is assigned as a post.
Let’s load the video in our front matter, and handle fallback and poster image in the post in our include. We’re only dealing with .mp4 and .webm here. Video conversion? Cloud convert does a decent job for now. So now we have:
---
layout: post
video: /video/clouds_over_the_mountain
---
We could have used a collection and repeated our 3 formats with the same name, but a single entry with now extention makes more sense while listing the path.
Now we’re checking for and image or video:
{% if page.image %}
{% assign postImage = page.image %}
{% elsif post.image %}
{% assign postImage = post.image %}
{% else %}
{% if page.video %}
{% assign postVideo = page.video %}
{% elsif post.video %}
{% assign postVideo = post.video %}
{% else %}
{% assign postImage = site.default_image %}
{% endif %}
{% endif %}
<video class="background"
loop
muted
autoplay
preload="auto"
poster="{{ postVideo }}.png">
<source src="{{ postVideo }}.mp4" type="video/mp4">
<source src="{{ postVideo }}.webm" type="video/webm">
</video>
The HTML5 Video Events and API page is a good place to start. You can see everything the API exposes and what may suite your needs. Check out this link for more on the element itself and attribute definitions.
Now we have to emulate background-position: cover; and we’re done.
video.background {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translate(-50%, -50%);
}
Enjoy adding video to your jekyll project. Video content in this post is from the good folks at DISTILL.
