Responsive HTML5 video shortcode for WordPress

Here is the code for functions.php

/* HTML5 video shortcode */
function html5_video($atts, $content = null) {
	extract(shortcode_atts(array(
		"webm" => '',
		"ogg" => '',
		"mp4" => '',
		"width" => '',
		"height" => '',
		"poster" => ''
	), $atts));
	$poster = ($poster != "") ? "poster='".$poster."'" : "";
	$height = ($height != "") ? "height='".$height."px'" : "";
	$width = ($width != "") ? "width='".$width."px'" : "";
	$string = "<video ".$poster." ".$width." ".$height." controls autobuffer>";
	$string .= "<source src='".$webm."' type='video/webm; codecs=\"vp8.0, vorbis\"'/>";
	$string .= "<source src='".$ogg."' type='video/ogg; codecs=\"theora, vorbis\"'/>";
	$string .= "<source src='".$mp4."' type='video/mp4; codecs=\"avc1.4D401E, mp4a.40.2\"'/>";
	$string .= "<p>Your browser does not support HTML5 video. Please upgrade.</p>";
	$string .= "</video>";
	return $string;
}

add_shortcode('video5', 'html5_video');

Required CSS:

video {
  width: 100%    !important;
  height: auto   !important;
}

This shortcode…

[video5 webm="movie.webm" ogg="movie.ogv" mp4="movie.mp4" width="720" height="480" poster="movie.jpg"]

…will output:

<video poster="movie.jpg" controls>
        <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
        <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'/>
        <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
        <p>This is fallback content</p>
</video>

Try this as an example:

[video5 webm="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" ogg="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" mp4="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" width="720" height="480"]

Add a CSS wrapper to make YouTube videos responsive in WordPress

UPDATE: includes solution for new Youtube or Vimeo embed tags.

CSS required for HTML5 video:

video {
  width: 100%    !important;
  height: auto   !important;
}

jQuery required for embedded videos:

TIP: If you use other embed sources, make sure to add to the $allVideos Variable.

$(function() {
    
    var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com'], iframe[src^='http://player.cnevids.com'], object, embed"),
    
   $fluidEl = $("figure"); // change this to your responsive html container
	    	
	$allVideos.each(function() {
	
	  $(this)
	    // jQuery .data does not work on object/embed elements
	    .attr('data-aspectRatio', this.height / this.width)
	    .removeAttr('height')
	    .removeAttr('width');
	
	});
	
	$(window).resize(function() {
	
	  var newWidth = $fluidEl.width();
	  $allVideos.each(function() {
	  
	    var $el = $(this);
	    $el
	        .width(newWidth)
	        .height(newWidth * $el.attr('data-aspectRatio'));
	  
	  });
	
	}).resize();

});

OLD VERSION:

Add this CSS to your page:

.videoWrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Add this to your theme’s function.php file:

function add_video_wmode_transparent_and_wrapper($html, $url, $attr) {

	if ( strpos( $html, "<embed src=" ) !== false )
	{ 
		$html = str_replace('</param><embed', '</param><param name="wmode" value="opaque"></param><embed wmode="opaque" ', $html); 
	}
	elseif ( strpos ( $html, 'feature=oembed' ) !== false )
	{ 
		$html = str_replace( 'feature=oembed', 'feature=oembed&wmode=opaque&rel=0&showinfo=0&controls=0', $html ); 
	}
	$return = '<div class="videoWrapper">'.$html.'</div>';
	return $return;
}
add_filter( 'embed_oembed_html', 'add_video_wmode_transparent_and_wrapper', 10, 3);

Reference: http://css-tricks.com/NetMag/FluidWidthVideo/demo.php

Center a popup with jQuery, CSS, HTML

A simple horizontally and vertically centered popup. Allows you to create several on one page.

Add this jQuery:

jQuery(".popupopen").click(function() {
  box = jQuery(this).attr('rel);
  jQuery('#'+box).show();
  width = -1 * parseInt((jQuery('#'+box).width()/2));
  height = -1 * parseInt((jQuery('#'+box).height()/2));
  jQuery('#'+box).css('margin-left',width).css('margin-top',height);
  return false;
});
jQuery(".popupclose").click(function() {
  jQuery(this).parent().hide();
  return false;
});

Add this HTML:

<p><a title="Open this popup" href="#" class="popupopen" rel="popup1">open a popup</a></p>
<div class="popup" id="popup1">
  <p>My popup insides</p>
  <a title="Close this popup" href="#" class="popupclose">close</a>
</div>

Add this CSS:

.popup { 
  z-index:999; 
  position:fixed; 
  top:50%; 
  left:50%; 
  width:66%;
  max-width:300px;
  padding:20px; 
  display:none;
  text-align:center;  
}

References:

Use Typekit Fonts with Shopify

First, sign up for typekit or login.

Then create a kit, and add some fonts to it. Don’t forget to publish changes to the web. Be patient, it takes a few minutes for changes to propagate.

Get your embed code from typekit. It will be something like this:

<script type="text/javascript" src="//use.typekit.net/<your-code-here>.js"></script>
<script type="text/javascript">// <![CDATA[ try{Typekit.load();}catch(e){} // ]]></script>

Write down the code. It will be something like “fdy5jae”.

Create a new setting in Shopify to record the code somewhere in config/settings.html:

<fieldset><legend>My options</legend>
<table>
<tbody>
<tr>
<td><label for="typekit_id">Typekit ID </label></td>
<td><input class="long text" id="typekit_id" type="text" name="typekit_id" value="" /></td>
</tr>
</tbody>
</table>
</fieldset>

Also in config/settings.html, add the correct font option elements to the font select boxes. EG: In this example, using font-family Proxima Nova.

    <tr>
      <td><label for="text_font">Text Font</label></td>
      <td>
        <select name="text_font" id="text_font">          
          <optgroup label="Sans-serif">
            <option value="'Helvetica Neue', Helvetica, Arial, sans-serif" selected="selected">Helvetica/Arial</option>
            <option value="'proxima-nova', Arial, sans-serif">Proxima Nova Typekit</option>
          </optgroup>
        </select>
      </td>
    </tr>

Set default values in config/settings_data.json:

{
 "current": "Slate",
 "presets": {
   "Slate": {
   ......
   "logo_font": "'proxima-nova', Arial, sans-serif",
   "nav_font": "'proxima-nova', Arial, sans-serif",
   "text_font": "'proxima-nova', Arial, sans-serif",
   "headings_font": "'proxima-nova', Arial, sans-serif",
   "accent_font": "'proxima-nova', Arial, sans-serif",
   ......
   "typekit_id" : "<your-code-here>"
  }
 }
}

In Shopify, edit layout/theme.liquid file with this snippet in between your opening and closingtags:

{% if settings.typekit_id.size > 0 %}
<script type="text/javascript" src="//use.typekit.net/{{ settings.typekit_id }}.js"></script>
<script type="text/javascript">// <![CDATA[ try{Typekit.load();}catch(e){} // ]]></script>
{% endif %}

In your CSS, use your font-family names as usual.

Have fun with licensed fonts on Shopify!

HTML table row and column hover with jQuery and CSS

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
/* #Reset & Basics (Inspired by E. Meyers) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* #Clear fix */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

/* Table Hover Effects */
.hovertable { width:auto;  border-collapse:separate; border-spacing: 5px 0; border:1px solid #f6f6f7; padding:5px 0; margin-bottom:20px; }
.hovertable thead { }
.hovertable th { text-align:center; padding:5px; background:#E6E6E6; border-bottom: 5px solid #FFFFFF; font-weight:bold; }
.hovertable td { text-align:center; padding:5px;  }
.hovertable colgroup { width:100px; }
.hovertable td.columnHead, .hovertable tr.rowHover, .hovertable td.columnHover { background:#ECE8E5; }
.hovertable tr.rowHover td.columnHead, .hovertable td.hover { background:#EF9E7C; }
</style>
</head>
<body>

<table id="example" class="hovertable">
    <colgroup></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <thead>
        <tr>
            <th>KNITWEAR</th>
            <th>UK</th>
            <th>FRANCE</th>
            <th>ITALY</th>
            <th>JAPAN</th>
            <th>DENMARK</th>
            <th>US</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td class="columnHead">XS</td>
            <td>6</td>
            <td>34</td>
            <td>38</td>
            <td>5</td>
            <td>32</td>
            <td>2</td>
        </tr>
        <tr class="even">
            <td class="columnHead">S</td>
            <td>8</td>
            <td>36</td>
            <td>40</td>
            <td>7</td>
            <td>34</td>
            <td>4</td>
        </tr>
        <tr class="odd">
            <td class="columnHead">M</td>
            <td>10</td>
            <td>38</td>
            <td>42</td>
            <td>9</td>
            <td>36</td>
            <td>6</td>
        </tr>
        <tr class="even">
            <td class="columnHead">L</td>
            <td>12</td>
            <td>40</td>
            <td>44</td>
            <td>11</td>
            <td>38</td>
            <td>8</td>
        </tr>
        <tr class="odd">
            <td class="columnHead">XL</td>
            <td>14</td>
            <td>42</td>
            <td>46</td>
            <td>13</td>
            <td>40</td>
            <td>10</td>
        </tr>
    </tbody>
</table>

</div>
<script>
// initiate hover effects
$(function(){
				
	$("table").delegate('td','mouseover mouseleave', function(e) {
		var table = $(this).parent().parent();
		var col = $(this).parent().children().index($(this));
		var row = $(this).parent().parent().children().index($(this).parent());
		if (e.type == 'mouseover') {
			$(this).addClass("hover");
			$(this).parent().addClass("rowHover");
			$("tr td:nth-child("+(col+1)+")", table).addClass("columnHover");
		}
		else {
			$(this).removeClass("hover");
			$(this).parent().removeClass("rowHover");
			$("tr td:nth-child("+(col+1)+")", table).removeClass("columnHover");
		}
	});				
				
});
</script>
</body>
</html>

References:

Measuringstick.png – overlay for testing CSS media queries

This image provides checkpoints for common browser sizes taken form our Google Analytics reports. Add it as a CSS overlay to any page to test CSS media queries for responsive design.

<html>
<head>
<style type="text/css">
	.measuringstick {
		background: url("http://endreywalder.com/measuringstick.png") no-repeat scroll 0 0 transparent;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 9999;
		pointer-events:none; /* allow to click through it */
	}

       /* put media queries here */
       @media (min-width:980px) { }
       @media (min-width:450px) and (max-width:950px) { }
       @media (max-width:1024px) { }
       @media (max-width:899px) { }
       @media (max-width:450px) { }

</style>
<!--[if IE]>
  <style type="text/css">
        /* allow to click through it */
	.measuringstick {
	  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://endreywalder.com/measuringstick.png', sizingMethod='scale');
	  background:none !important;
	}

   </style>
<![endif]-->
</head>
<body>
   <div class="measuringstick"></div>    
</body>
</html>

A simple function to create a mobile drop-down menu from a HTML list

Create an HTML menu as follows:

<nav>
   <ul>
       <li><a href="#">Link</a></li>
       <li>
           <ul class="subnav">
                <li><a href="#">Link</a></li>
                ...
           </ul>
       </li>
       <li><a href="#">Link</a></li>
       ...
   </ul>
</nav>

Add jquery and this your javascript:


// JavaScript Document
$(window).ready(function(){
       initialisemobileselectmenu();
}

function initialisemobileselectmenu()
{

	// Add a select bo to HTML element "nav"
	$("<select />").appendTo("nav");
	
        // Add an option to the top called "Menu"
        $("<option />", {
	   "selected": "selected",
	   "value"   : "",
	   "text"    : "Menu"
	}).appendTo("nav select");

        // scroll through each list element and add 
        // an option to the select menu
	$("nav ul li a").each(function() {
		var el = $(this);
		subtext = (el.parent().parent().hasClass('subnav')) ? "- " : ""
		$("<option />", {
		 "value"   : el.attr("href"),
		 "text"    : subtext+el.text()
		}).appendTo("nav select");

	});

        // add selected to current page
	$("nav select").change(function() {
		window.location = jQuery(this).find("option:selected").val();
	});
}

Add CSS media queries to hide navigation and select boxes:

/* hide select and show list as default */
nav select { display:none; }

@media all and (max-width: 767px) { 
/* hide list and show select for smaller screens */
nav ul { display:none; }
nav select { display:block; }
}