INTERTEXTrEVOLUTION

Make.Hack.Play.Learn

Building a Video Page

Published by J. Gregory McVerry on

Reflection on Building My Video Page

Often we fear the scaffolds that surrond us. Building out your own infastructure takes time and effort. Over the last few months I have looked to alternatives for hosting my videos rather than relying on YouTube. I don't want people having to swim through trackers to watch my content. I am not making money on pre-roll advertisments, nobody watches my stuff. Finally I disagree with YouTube's terms of service and their creative commons content. How can something have a license that allows for remixing but to download the video to edit you violate YouTube's Terms of Service? Basically you trap content meant for the world behind a silo.

I needed a new way forward. I first turned to the Internet Archive. You can see all my videos here. I might still use archive.org for my class videos, stuff for a very specific audience, but I wanted to create feeds of videos on my own site. I find the msot resilient content you can build online begins with your own domain

You can see the results of my video page.

How I did it?

I began by thinking about my design. I sketched it out quickly on paper. I wanted to organize videos by topics or shows and have a feed for each. So I decided to use flexbox to make a quick video grid. I could have used CSS Grid but I only needed to think in one dimension so flexbox would do.

Layout and MarkUp

.videoblock {
display:flex;
flex-wrap: wrap;
 justify-content: flex-start;
}

So I am setting the display to flex. I then use a wrap so if a video does not fit in the current display it will drop down to another row. I then justified the content at the start of the flexbox. As I built the feed I kept checking the CSS tricks guide..

.videoblock video {
  width:320px;
  height:240px;
}

I then set the video width and height to 320x240 which is a 4:3 ratio and would allow me to have three videos across large displays, two videos on most displays, and one video on smaller displys.

  .videoblock div{
  margin-right: 20px;
  margin-bottom: 20px;
}

The videos were too close together so I added a bit of margins on each side. I know I could use shorthand and write the two rules in one line but for people just learning often seeing explicit rules helps with understanding and growth.

.videoblock p {
  font-size:2vmin;
  line-height:2vmin;
}
.videoblock time {
  font-size:1.8vmin;
  line-height:1.8vmin;
}
.videofeed {
  margin-bottom: 20px;
}

I then started to play with my font-sizes. They are not perfect yet. Too big and you push the div down into the next row, too small and folks can not read them. I have also started to use viewport sizes for fonts to reduce the number of media queries I write. After I had my layout set I turned to my HTML markup

  <div class="h-entry">
          <p class="p-name">Poetry Response</p>
          <a class="p-author" href="/"></a>
           <video  controls poster="https://jgregorymcverry.com/videos/respond2poetry.png "class="u-video"
           src="https://jgregorymcverry.com/videos/RespondToPoetryWithPictures.mp4"> 
          </video>
           
      <p class="p-summary">Respond to Poetry with Images?</p>
      <time class="dt-published" datetime="2019-11-1111:24:20+0000">2019-11-11</time>
        </div>

In term of the video I am mainly shooting in 720p. These are instructional videos. I see no reason in wasting bandwidth on anythign higher. Personal videos I may step up the resolution.

If you are worried about hosting or don't have enough space you can use the Internet archive. In fact many of the videos on my page are still hosted there. Just copy the embed link to the video form archive.org and switch archive.org/embed/file to archive.org/download/file. If you have multiple videos in an archive.org item you will need to use the inspect tool to grad the link. You will need to replace details with download in this case. As a final note archive.org only allows openly licensed content.

I ended up adding a div around each video. .This means each div is like it's own box and flexbox. Anything contained in the div sticks together. I made each video an h-entry. This is a kind of data called microfomats that tells social readers this is a post containing stuff. The microformats are also important to generate an RSS feed for my videos.

Building h-feeds and RSS feeds

 <section class="h-feed videofeed" id="7minuteTips">
  <h2 class="p-name">7 Minute Teaching Tips</h2>

I arranged each feed into sections. The semnatic HTML elements are not required. I could have used a div but stuff like section and article make it easier for me to see my website as a bunch of restackable pieces. When I just use div it is hard to tell what piece I am working with

I also made each section have an id. This allows me to use a fragment link to get to each section. So if I want to link directly to my 7 mintue teaching tip videos I can add https://jgregorymcverry.com/myvideos#7mintueTips

The feeds were a bit oo close together so I added som margin to the bottom. If you use a social reader that can add to h-feed you can now add my videos

Next I needed to make an RSS feed for the other 98% of people who are interested in my content. This used to mean having to write and mantain an entire seperate file called XML. This leads to so many problems. When you have to manuallyenter the same data twice it doesn't take too long for one of your data sources to be wrong.

Luckily Ryan Barret made this awesome tool called Granary. Granary will fetch a feed of your choice and then serve it up in a different feed type. So I select HTML and then select RSS for my output and boom I get a link to a proper RSS file. It will change as I update my content. Granary doesn't store any data, it just serves up the conversion. I drop in https://jgregorymcverry.com/myvideos#7mintueTips and I get href="https://granary.io/url?input=html&output=rss&url=https%3A%2F%2Fjgregorymcverry.com%2Fmyvideos%237minuteTips. You can now subscribe to my video feeds in RSS.

What is Next?

I have started to caption all of my videos. It takes my about 3X the video length to clean up captions after importing them into the same tool. I also need to learn the syntax of how to display text overlays in my captions. If I am just repeating words I say for emphasis I wouldn't include them but sometimes I incldue extra information. I wonder if there is a way to put this in captions or if it doesn't belong.

Featured img a remix of construction flickr photo by mini_malist (off is the new on) shared under a Creative Commons (BY-ND) license and Videographer flickr photo by Dhammika Heenpella / CWSSIP Images of Sri Lanka shared under a Creative Commons (BY-NC) license

Also on IndieWeb News