Fix Mixed-Mode YouTube Embeds in WordPress

Are you attempting to embed YouTube videos in a secure (https) WordPress site?  Well, browsers should be blocking that content since the videos are not coming in over a secure channel.

A consequence is that some YouTube videos won’t display, and an error won’t be displayed–which is annoying.

Here is a brief snippet that can be added to your functions.php file to fix the problem once and for all.

The line beginning with “$search” specifies that we are searching for non-secure links to YouTube, and the return line combs through the post, and fixes the links so the embeds display properly.  It’s a simple fix, based on WordPress’ powerful filter hook system.

jQuery Goodies!

I started a new GitHub repo to fill with jQuery utilities and behaviors.

The initial commit is filled with viewport sizing utilities.  The utilities make it easy to use viewport-relative sizing in situations where browsers do not support VW and VH.

Something that I use a lot is the Letterboxing module.  Simply by adding .jq-letterbox, you can strictly enforce an element to have a widescreen aspect ratio.  This is very handy for sites that show lots of YouTube movie trailers.

Grab the Repo

https://github.com/bradkovach/jqUtilities

Installation

1. Import a recent version of jQuery

Note: script tags do not need type="text/javascript" when using HTML5.

2. Import the utilities AFTER jQuery

 Usage

Full usage information is available at the head of the jqUtilities.viewport.js file.

Help

By default, these utilities log errors to the console.

Known Limitations

  • Mixed markup and style information.  Style information is hard-coded into HTML markup.  This might be undesirable.
  • This is not a polyfill.  It is a workaround.  Nice polyfills exist, and that might be a better option for you.

 

#vinevortex: Consuming My Life 6 Seconds A Time

I just thought I should point out, publicly, that Vine is consuming my life.  Vine is the trendy new social network from Twitter that allows you to create and publish short, looping 6-second videos.  The creation controls are primitive, but the results have been extremely creative.

Your available options for editing include touching the screen to record, and not touching the screen to not record.

It’s pretty basic, but it’s hopelessly addictive.  iPhone only; for now.

http://vine.co

The Developer’s New Struggle: Data Caps

These past 10 years have hosted a huge evolution in our data distribution technology. Since 2000, we’ve watched household broadband speeds move from about 0.5 mbps to somewhere around 20 mbps on average. This is awesome.

We have new LTE networks that are capable of pushing around 50 mbps over the air. Please note: this is faster than most household connections.

We live in an era of increasing bandwidth, and this is good news for web developers. This allowed sites like YouTube to become popular, because they finally had customers that could enjoy their product.

But developers have new struggles! Now, developing truly mobile applications (both native apps and web apps) must account for the new obstacle: carrier data caps.

How annoying. We’ve finally been given a trove of bandwidth (both low latency and high capacity), and we have to start using it very carefully–dare I say responsibly…

It’s food for thought. We have better networks and more ubiquitous access but increasingly more consumers have charted courses for the edge of a bandwidth cliff every single month.

So we must continue to adapt.

Things That Are Concerning

  • Popular development frameworks can be rather bloated.  Twitter Bootstrap (minified) is 101kb and another 17kb if you want the responsive tweaks. .
  • Responsive images are not really taking off. Even Apple does not have a decent implementation for responsive image serving that doesn’t involve convoluted Javascript.
  • Developers that don’t pay attention to client-side caching techniques.  Make browsers get changes by using ?ver=[autoincrement] to force browsers to reload only when content changes.
  • Everybody wants “apps” and these apps need data. Lots of these apps send a lot of data (either as JSON or XML) without implementing a cache mechanism.  Twitter uses a neat trick to keep data transfer down: the since_id query parameter.  This minimizes payload by ignoring content that the client probably already has.
  • XML has too much data overhead on structure to be considered efficient, yet it is hailed as a great data interchange format–NOT FOR THE WEB!  Typically ever XML tag is matched by a closing version of the tag.  Look at the overhead here: <strong>this is bold text</strong>.  The strong tag and its closing tag take up 17 characters, which is equal to the length of the content it formats.  This is a massive overhead!  Mobile clients shouldn’t rely on XML for updating content (like a timeline of continuously updating information).

This was merely a brief rant about implications about data load.  This doesn’t even consider some of the changes that occur with data throttling, and packet shaping.

Worrying about data overhead is the new black.

Brewing Iced Tea Properly

From http://www.starbucks.com/menu/drinks/tazo-tea/black-shaken-iced-tea

Picture: Starbucks Black Shaken Iced Tea.  More info at Starbucks’ Website.

Subtle. Suave. Sophisticated. Our premium black tea gets a snappy little splash of citrus, and then is shaken – not stirred – with ice. We’d tell you more, but the details must remain classified. Still, you do have license to enjoy.

Tazo® Black Shaken Iced Tea, Starbucks.com

Bitch, please.  Classified?  Ha!  Iced tea isn’t hard…

Why the hell am I blogging about this?  Because I see a lot of fools trying to make tea, and they all suck at it.  It’s not hard, but there is a way to do it right to get the crystal-clear, refreshing tea you’re used to seeing/drinking at Starbucks or McAllister’s.

Black Iced Tea, Proper

  1. Boil 1 liter of water.
  2. Cover 4 cup-sized black tea bags (Lipton will do just fine; Starbucks uses Tazo Awake tea, FYI) with 1 liter of boiling water.
  3. Steep for four minutes.
  4. If you love sweet tea, add 2 cups of sugar to the liter of strongly-brewed tea and stir until dissolved appropriately.* (note: this is how McAllister’s Sweet Tea is made)
  5. Add 1 liter of cold water.  Do not refrigerate.  Refrigeration causes tea to go cloudy.  Cloudy iced tea is bad tea.
  6. Pour a glass as follows
    1. Add equal parts tea and water
    2. Add ice
    3. Shake or stir
  7. Drink that tea.

I prefer 1/3 tea, water, and ice.  Adjust to suit your tastes.

EXCITING FISCAL NOTE: this is roughly 12 cents per pitcher and pennies per serving, even if you buy Tazo Brand tea from Starbucks.

* Never assume that everyone likes black iced tea.  Sweeten your own tea with sugar or simple syrup.

I made Twitter work yesterday.

Matt Jolley is an openly-gay high school senior from Worland High School (Worland, Wyoming).  This photo is being rejected from his yearbook because it is "too political."

Matt Jolley is an openly-gay high school senior from Worland High School (Worland, Wyoming). This photo is being rejected from his yearbook because it is “too political.”

I saw a petition on change.org that troubled me greatly.  The petition is from Matt Jolley, a high school senior from Worland High School.  Mr. Jolley is an openly-gay senior, and his senior photo was reflection of that.

But, unfortunately for Matt, his school board denied him the right to publish his senior portrait in the yearbook.  They reasoned that the photo was too political, and he must pay for the publication, since it was “an advertisement.”

Please view and sign Matt Jolley’s Petition.

So I did what I always do when I get mad: I got on Twitter, and I made shit happen.

I started watching for celebrities to tweet.  When a celebrity would tweet, I would send them a plea to retweet a link to Matt’s survey.

I sent these to dozens of celebrities.  And it worked.  In total, the tweets were shown to at least 300,000 people.  It cost me nothing, and earned Matt a lot of petition signers.

Here’s the first successful tweet, sent to LGBT icon/MTV personality Dan Savage…

Dan Savage retweeted it almost immediately, and then the petition started getting signed a little bit faster.  So I kept tweeting.  I follow a few celebrities, and I paid careful attention to them.  When they would tweet, I would tweet.  Within a few minutes, BAM! another retweet, this time from Chef Anne Burell.

I kept this up for the greater part of yesterday.  Got a lot of traction by tweeting @adamlambert.  He didn’t personally respond, but his fans did.

And then one final tweet, from @ChelseaVPeretti released a swath of new petition signers.

Twitter is full of free publicity, and it’s especially full of well-followed people that are willing and able to help.  Had I worked harder, or had a team of people to help me, and used a hashtag to organize the campaign, this would have had an even greater effect.

Regardless, this was a very fun use of a Sunday afternoon.  I learned a lot.  I received hundreds of retweets yesterday.  Not bad, considering I was in pajamas drinking wine all day.

BTW, I’m still mad at @RuPaul for not retweeting.  He was on Twitter ALL. DAMN. DAY. and he didn’t retweet me once.