We often use GitHub to create a compare view, and list pull requests (PRs) for releases. However, GitHub limits the number of commits you...
Documentation GitHub GitUsing our Hugo-based documentation site, we typically publish release notes once per week. My usual process includes the following: M...
Documentation Hugo ArchetypesAs someone who basically gets by when it comes to writing Javascript, I tend to look at things from a “I bet I could do this with CSS” st...
CSS SCSS Mobile UX UI/UX frontendThis is an updated post of the original here. Whether you’re new to the frontend at RIMdev or looking for more about our Frontend team...
Team RIMdev FrontendIf you’ve ever worked in Azure Data Studio, you may find tab colors very useful. They allow you to visually separate different connectio...
Documentation Azure Data StudioIf you’re not familiar with Platform UI, it’s a utility rich CSS framework we created. As we look to migrate all of our apps and static ...
UI UX CSS SassGet ready to celebrate because, as of Friday, September 18, 2020, Evan You, creator of Vue.js, announced Vue 3 is officially released. He...
vue3 frontend developmentTypically with ASP.NET Core 3.1 when no specific authorization requirements are set all endpoints are publicly accessible. When you’re wo...
asp.net coreIf you have used slots in Vue, you know that it provides a clean way to vary content that is displayed in child components. For example, ...
VueJS Slots Scoped Slots JavaScriptWe’ve been using Swagger via Swashbuckle for some time with our ASP.NET Full Framework applications. As we’re moving toward ASP.NET Core ...
asp.net coreWe’ve spotted some strange behavior before with ASP.NET Core and JSON serialization/deserialization, and I eventually made it back to try...
asp.net coreWe’ve spotted some strange behavior before with ASP.NET Core and JSON serialization/deserialization, and I eventually made it back to try...
asp.net coreAs we create CSS components in our internal framework, we typically try to use little if no JS. Our tooltips should be no different. We...
UI/UX frontend CSS Responsive DesignImagine you’re using Elasticsearch with your strongly typed C# models and nameof(MyProperty) and wondering why it doesn’t work. Turns out...
.NETI have been working as a software developer for almost three years, the most common exception or bug I made is NullReferenceException -Sy...
.NET C#Testing is an important step we can take as developers to reduce bugs in our code, but testing seems to be one of the best practices that...
Vue.js Jest TestingLast week I attended the annual user experience conference Convey UX in Seattle, where 50 UX leaders from all over the world shared their...
UI/UX frontend conference conveyux2020 conveyuxWe run a number of web applications at Ritter Insurance Marketing. Our primary datastore for these applications is MSSQL / SQL Azure. Our...
SQLWe’ve been working through upgrading our core applications from ASP.NET full framework to ASP.NET Core. Over the years we’ve assembled an...
.NETConfigurationManager has long been used by .NET Framework developers prior to .NET Core to access things like app settings and connection...
.NETMost 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.
