13

YouTube Full Screen Player Page from Playlist

The request was that we do something interesting with the random screens we have scattered around our area. It seemed like it’d be easy to make a little full-page player for a YouTube playlist with some lightweight overlays to emphasize the connection with our department. Handling the videos displayed via a playlist makes it easy to add/remove content and the making the logo overlays part of the webpage let us keep things consistent across videos we didn’t control. Since we weren’t activating sound by default turning on captions by default was also a key need. The codepen example is here. The HTML is dead simple. We’ve got a wrapper div which lets us make it full screen, an ytplayer div for the videos, and two divs to do the logos. The javascript is pretty much a cut/paste from the YouTube API docs. There are a few changes to reference the playlist instead of a single video and some stuff around closed captions and that’s noted below. The main tweak here is to get the fullscreen video to behave. I use this pattern from CSS tricks. The other stuff just staples some divs over the lower corners to show the logos.

25

Beer Bubbles CSS

Another random conversation led to this experiment . . . it’s animated CSS which is pretty cool but I can’t take any credit for it. I found this example on Codepen and then mainly gutted it to make what you see below (also a minor experiment with flexbox). See the Pen CSS Animated Beer Pour (Forked from CSS Beaker Pen) by Tom (@twwoodward) on CodePen.

Appropriating Appropriate Styles – Quickly

Suppose you had to build a web page pretty quickly (an hour or so) and suppose you had to have it mostly match the theme from some other site you had nothing to do with. You’ll want it to be responsive etc. You’ll do the whole University-brand identity thing. Suppose you’re a pretend web developer. Here’s my pattern (based loosely on actual events). Here’s the original page. The screenshot below was made with the Full Page Screen Capture Chrome plugin. Step One – Framing I’m using Bootstrap on this one because I’ve become decently familiar with it. I may use flexbox in the future but speed was the deal so I went with something I knew. I figured I’d echo the framing of the first site (which is pretty typical in any case)- VCU banner header with some navigation a big picture a couple of text blocks spanning about a 1/3 of the page the footer There’s some default navigation stuff I can paste in.1 From there I start to look at the body of the page as Bootstrap components. In my head I’m sketching it out in rectangles. In Bootstrap, that’s essentially Container>Rows>Columns. Everything is based on a 12 column width, so if you want to make something 1/3 of the page in width, you’d do put it in […]

Radioactive Collage Maker

Radioactive is the book that VCU’s first-year students are reading. It’s an interesting book with interesting art and collage playing a major role in the design. I hadn’t really looked at it until this morning but I ended up in a conversation and an idea came to mind. “What if we could deconstruct elements of the text (words and images) and give them to students to recombine in interesting ways?” It seemed like a fun thing to do and within reach based on work I’d done earlier with Google Spreadsheet Fridge Poetry but I wanted a few more capabilities to help people create better visual products. I took my phone and took a bunch of quick pictures of pages from the book that seemed interesting and easy to cut out. That took about 10 minutes to photograph and drop the backgrounds.1 Another 10 minutes and I had a working prototype using the old Google Fridge Poetry. Not bad but I wanted to be able to rotate/resize images and be able to save the results as an image file (something I tried but failed at doing last time around). Resizing It turned out resizing was built into jQuery with the resizeable. $( “.resize” ).resizable(); Nice but it resizes the element holding the image rather than the image itself . . . […]