Archive for December, 2013

Type
Mon Dec

How to Make Spotify Responsive with Fitvid.js

After trying to make Slideshare presentations responsive with Fitvid.js I tried it with spotify. This is something that I had attempted months before, but to no avail. There are a…

After trying to make Slideshare presentations responsive with Fitvid.js I tried it with spotify. This is something that I had attempted months before, but to no avail. There are a couple of jQuery CSS solutions out there, but none of those really worked all that well either.

Alas, I attempted it again following the same method at Slideshare as seen in this post.

I will repeat the steps here while substituting the Slideshare code with Spotify’s…

Note: Leave in the sizing parameters. No idea why, but this makes the album art show in a more aesthetic way.

Make Spotify Responsive

To make Spotify posts responsive the first thing you need to do is obtain the Spotify embed code available when you right click on a song in the desktop app. Paste it where you would like to have your video, and proceed to open up your Fitvid.js file and locate the following code.

var selectors = [
        "iframe[src*='player.vimeo.com']",
        "iframe[src*='youtube.com']",
        "iframe[src*='youtube-nocookie.com']",
        "iframe[src*='kickstarter.com'][src*='video.html']",
        "object",
        "embed"
      ];

Now you will want to add the following snippet right under the Kickstarter selector (or the Slideshare one if you added that too!)


"iframe[src*='slideshare.net']",

Make sure you include “embed” before the url. After you have added that snippet you should have the following code.


return this.each(function(){
      var selectors = [
        "iframe[src*='player.vimeo.com']",
        "iframe[src*='youtube.com']",
        "iframe[src*='youtube-nocookie.com']",
        "iframe[src*='kickstarter.com'][src*='video.html']",
        "iframe[src*='slideshare.net']",
        "iframe[src*='embed.spotify.com']",
        "object",
        "embed"
      ];

Save the file, make sure you’ve correctly targeted the area you would like to resize the videos in, and you should be all set.

If you would like you can also specify a new selector right in your jQuery code without altering the fitvid file by inserting the following code!

$("#thing-with-videos").fitVids({ customSelector: "iframe[src^='embed.spotify.com']"}); 

Let me know if you’re having any trouble int he comment section to the right!

View
Type
Mon Dec

How to Make Slideshare Responsive With Fitvid.js

Fitvid.js is a phenomenal script developed by Chris Coyier, and saved me about 100,000,000 hours every month. I use it to resize virtually every media object on my site. To…

Fitvid.js is a phenomenal script developed by Chris Coyier, and saved me about 100,000,000 hours every month. I use it to resize virtually every media object on my site.

To make Slideshare posts responsive the first thing you need to do is obtain the Slideshare embed code and paste it where you would like to have your video. Make sure that your remove and width and height parameters. Secondly, open up your fitvid.js file and locate the following code.


var selectors = [
        "iframe[src*='player.vimeo.com']",
        "iframe[src*='youtube.com']",
        "iframe[src*='youtube-nocookie.com']",
        "iframe[src*='kickstarter.com'][src*='video.html']",
        "object",
        "embed"
      ];

Now you will want to add the following snippet right under the kickstarter selector.


"iframe[src*='slideshare.net']",

After you have added that snippet you should have the following code.


var selectors = [
    "iframe[src*='player.vimeo.com']",
    "iframe[src*='youtube.com']",
    "iframe[src*='youtube-nocookie.com']",
    "iframe[src*='kickstarter.com'][src*='video.html']",
    "iframe[src*='slideshare.net']",
    "object",
    "embed"
];

Save the file, make sure you’ve correctly targeted the area you would like to resize the videos in, and you should be all set.

If you would like you can also specify a new selector right in your jQuery code without altering the fitvid file by inserting the following code!


$("#thing-with-videos").fitVids({ customSelector: "iframe[src^='www.slideshare.net']"});

Let me know if you’re having any trouble int he comment section to the right!

View
Type
Tue Dec

How to Make Cookies and Cream Oreo Bark

Ingredients: 10oz. Ghirardelli white chocolate chips 15 regular size Oreos, plus 3 more for topping Directions: Preparation: Line an 8×8 pan with enough parchment or wax paper for a 1…

Ingredients:

  • 10oz. Ghirardelli white chocolate chips
  • 15 regular size Oreos, plus 3 more for topping

Directions:

Preparation: Line an 8×8 pan with enough parchment or wax paper for a 1 inch overhang on each side.

  1. Place chocolate in a double boiler over low heat and stir continuously, until chocolate is completely melted.  Transfer chocolate to a heat proof bowl and cool for 5 minutes. Add chopped Oreos and stir to combine. Pour mixture into pan. Use a spatula to smooth out top.
  2. Finely chop remaining Oreos and sprinkle on top. Chill for about 10 minutes until chocolate becomes solid.
  3. Lift whole bark out of pan by holding onto parchment or wax overhang. Split bark into pieces with a fork.

A few notes:

  • To shave off even more time use mini Oreos to bypass chopping regular size ones.
  • If white chocolate doesn’t suit your taste, use any chocolate that does.
  • You can leave the top bare but keep in mind it will look slightly grey from the mix of black Oreo crumbs against the white. To avoid the unappetizing grey tint either drizzle the top with chocolate or sprinkle finely crushed Oreos on top.

Oreo Cookie Bark

Oreo Cookie Bark Holidays

View

Subscribe for More!


I send out a monthly newsletter on various topics.

Take a moment to enter your details, and you can select the news you would like to have delivered to your inbox!