We’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 cuisineAt Ritter Insurance Marketing we utilize Azure Web Apps for hosting many of our web applications. Azure Web Apps is a platform as a servi...
Azure Configuration OSSState management, Redux, Vuex… whatever you want to call it or whatever flavor you use, people have a lot of opinions about it. I’ve writ...
JavaScript VueIf you’re familiar with Vue at all, you’re probably familiar with the v-for. And if you’ve used any other front end frameworks, they each...
JavaScript VueDo you want to save 80% of your bandwidth to your search provider? Do you want to deliver content to your users faster? With this one tr...
Development Elasticsearch DebuggingWe operate in a typical QA -> Production workflow on both our front-end and back-end teams. So, what happnes when your front-end is in...
Development JavaScript Dev Ops Vue Vue.js JekyllIf you’re not familiar, or just haven’t used Sass maps, here’s your chance to dive in. Our latest static site was built on Jekyll using ...
sassIn JavaScript, we are always working with different data types to send to the API or display on the UI. Cloning and altering that clone i...
JavaScriptC# being an Object Oriented Programming (OOP) language, we have access to inheritance. Like any feature of a programming language, you sh...
csharp bugsWe love the combination of SQL and Elasticsearch and believe it is a winning combination for anyone building a modern application. Elasti...
Elasticsearch NEST C#I’ve been watching [DotNetConf][dotnetconf] videos over the weekend, and was most curious about [Mads Torgersen’s][mads] [“What’s Coming ...
c-sharp C# .NETHugo is an amazing static site generator, but getting lost when templating is easier than we’d like. We’ve found a way to evaluate variab...
Hugo JAMStack StaticRegardless of your opinion on Object Relational Mappers (ORM), I think they are a great tool for prototyping ideas. Over time, they can l...
.net core sqlDealing with JSON data in SQL Database introduces several challenges. This post addresses querying json data stored in SQL Database that...
SQL Azure Database developmentWe are in the middle of writing a template engine to define dynamic forms. The user interface can only post to a known model on the serve...
C# developmentWe are living on the bleeding edge that is Hugo’s release cycle. To keep our macOS development environments up to date we wrote this shel...
developmentMost 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.
