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...
developmentHugo recently released an amazing asset pipeline, which means you need less external dependencies to build a sweet static site. To take a...
dev buildI could probably rant and rave about Internet Explorer (IE) for a couple of hours, reminiscing about busted box models, janky IE specific...
IE Development JavaScriptVue has been a delightful framework to work with. The first thing I noticed about it was how easy to follow the documentation was and how...
Vue Development JavaScriptWith the news that Microsoft is acquiring GitHub, I thought I would ask the team what their thoughts are on the topic. We utilize the .NE...
Security is an essential part of any application ecosystem, but it can also be a nebulous concept for an organization to grasp. During ou...
developmentLet’s say you are developing a new Infinity War SQL stored procedure. Thanos, your boss, has explicity told you to add validation to a st...
development c# sqlData can often be messy and cleaning it up falls on the shoulders of you, the developer. It’s also easy to search StackOverflow for compl...
developmentReferencing nested objects in your LINQ to SQL query does some pretty neat magic “behind the scenes”. But, there are occasions when its m...
EF SQLThe RimDev.Stuntman NuGet package has reached version 2.0! Unified package with ASP.NET Core 2.0 Support Both ASP.NET full framework an...
OSSLet’s talk about state management for a minute. There’s recently been a bunch of hubub about Redux on Twitter, and arguments about the us...
Web Vue Vuex JavaScript StateManagementHere at RIMdev, we are big fans of Vue.js, as we’ve written about before. It scales well and is very versatile whether you’re starting up...
Web Vue JavaScriptAt Ritter Insurance Marketing we value our peers and other organizations in the overall software community. We believe in the power of c...
OSSIn today’s front-end ecosystem we are breaking down code into separate files and importing them. This helps us separate out code and reus...
Web Vue JavaScript WebpackSoftware development is a funny thing. As I develop my skills, I begin to form an idea of what’s right and wrong, what’s up and down. Thi...
elasticsearchMost 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.
