Home > WordPress > YouTube Full Screen – Javascript & CSS

YouTube Full Screen – Javascript & CSS

I’m sticking this js/css combo in a number of the WordPress themes we’re building.

It’s two pieces, a javascript piece that finds the YouTube videos and wraps them in a div and a CSS Piece that makes the videos full size for the enclosing div. It stops overflows from getting ugly and expands small embeds (via oembed or embed code).

I think it’s handy and I keep having to go to codepen to find it. So now it’s here.

See the Pen
full size youtube/vimeo by Tom (@twwoodward)
on CodePen.

Related posts

What is Rampages.us? Part One

I’m going to be attempting to explain what rampages.us is to a group on Tuesday. I’ve been struggling with a more digestible version of this for some time. While true, saying “Whatever you want it to be,” isn’t what people want to hear. Giving people something more concrete to think through what the site can do makes sense. These categories, however blurry and overlapping, provide some entries to additional thoughts and will likely help me organize my brain around this a bit better. Outside eyes are helpful so if you see stuff I’m missing or explaining poorly please throw me a comment here or on Twitter. While some of the details are specific to our version, I think the general arguments might be of use to others. If you end up doing that (or have already done it), throw me a link as I’d love to see how other people do this. Technically Speaking Rampages.us is a large WordPress multisite installation started roughly three years ago. Our community currently has over 24,000 sites and 22,000 members. WordPress is an open source platform which runs a huge portion (~30%) of today’s Internet and is the most popular CMS in the world. That matters for a variety of reasons. WordPress is free. This dramatically lowers barriers to access for our students while […]

Historical Will Annotation Continued: A WP API Experiment

The Judah Will Project (now with new URL!) has continued to grow as Ryan has been putting in serious work on the research and writing side of things. I have no choice but to step up my game and it’s been an interesting learning experience as it’s the first time I’ve tried anything sophisticated with WP providing the writing/data side of things while presenting that information somewhere else entirely. Headless? So here’s a recap of changes since the last update. More Obvious I talked to Jim about the project a few days ago. It became clear to me that it wasn’t obvious that the names in the will transcription were clickable prior to actually clicking on one. I fixed that with a simple dashed underline. This was one of those times where I was trying to keep the visual elements minimal but ended up going too far. I also threw in a modal popup for initial directions to make things more obvious. I just used this simple modal jquery plugin. It immediately drove me crazy by popping up all the time. So I looked around and found a solution to set cookies which I’d never done before. I also used a modal for the ever-growing family tree. When you have 12 kids in a generation, things get pretty wide. Permanent […]