Website design/development has indeed come of age with the concept of responsive design. Content images videos can all be dynamically resized so as to suit a responsive design with not much of requirement in the basic structure; Videos however present a sort of a challenge in this regard. By and large flash was being used for delivery of videos in websites; however it is supported by most mobile platforms in this article most notably on Ios mobile devices. In this article we shall talk about the concept of embedding responsive videos along with schema mark up in word press s genesis 2.0 framework.
Genesis 2.0 comes with a bag of responsive goodies-
One extremely popular and noted Word Press theme from the stable of Studio-press is Genesis; The latest Genesis 2.0 comes with in-built support for Schema.org; which simply means that it is easy to optimize the website’s search engine abilities, allowing distinct classification of vital and crucial elements on your web pages. Before we look into the highlights of Genesis 2.0, a brief insight into the aspect of schema mark up and schema.org-
Role of Scheme mark up-
Schema.org is a consolidated hub of structured mark up codes which work on improving your website experience as well as your web page visibility by means of communicating with search engines. On page markup help aid search engines to relate to content on web pages and thereby provide richer and more specific search results. It is but the purpose of search engines to make it easier for people to find clear and relevant information on the internet; Schema Markup also enables introduction of new tools/applications that contribute to the overall structure.
All right, consider the following highlights (largely with reference to responsive design alone) of Genesis 2.0; why should it be the most obvious choice for a responsive framework –
- Genesis 2.0 is HTML5/CSS3 compatible- Genesis has adapted to latest web standards with most of the Genesis Child themes becoming mobile responsive friendly. All but with a single line of code a child theme can utilize HTML 5 features effectively. Websites powered by Genesis 2.0 would enjoy cross-browser compatibility, mobile-ready features as well as native support for audio / video formats. Genesis 2.0 brings out the benefits of HTML5 in terms of storage/ API interaction as well. The role of HTML5 is crucial in its association with Genesis 2.0 due to the fact that allows for extensible design and supports video/ audio components like no other markup language.
- It is search engine optimized – Supports Schema.org Microdata.
Genesis 2.0 comes with built in support for schema.org which allows enhancement of the websites search engine optimization efforts; with results getting displayed through specific classification of the important/defining elements on a given webpage.
- WebPages load faster than ever- Now the page loading time plays a vital role as a user tries to access your webpage; greater the delay more than chance of the visitor getting driven away from your website. Now certainly this is a factor that cannot be compromised while your website becomes mobile-friendly as well. The all new elements introduced in Genesis 2.0 bring down the page loading time of a given website; allowing a page load to happen in milliseconds!
- Flexible and secure foundation code- Genesis 2.0 paves way for changes and also adapts; the basics of security and performance of a website powers the fate of any modern business The web publisher inherently will have to make room for the site to adapt to change, be it for breakthroughs in technology, or to future-proof the website in terms of code /structure.
Genesis 2.0 makes complete use of newer features of WP 3.6, especially so with all the security updates / bug fixes. With newer features being introduced; it has retained backward compatibility –even in the instance of having deployed a non-HTML5 theme there will not be any major hurdle during upgrades Genesis 2.0. To justify score of benefits just discussed, let us consider the feature of having to add a Responsive video with schema mark up to a website based on the genesis 2.0 framework .
Begin with a short-code on video schema mark-ups-
The mentioned code will add required structure of schema markups /video in the blog post. Copy the same and add it in the function.php of your child theme.
/ YouTube ShortCode [youtube src=”” title=”” duration=”” thumbnail=”” description=””]
function youtube_shortcode( $atts ) {
extract(shortcode_atts(array(
‘src’ => ”,
‘title’ => ”,
‘duration’ => ”,
‘thumbnail’ => ”,
‘description’ => ”
), $atts));
$video_tag = ‘<div itemprop=”video” itemscope itemtype=”http://schema.org/VideoObject”>’;
if ($title != ”){
$video_tag .= ‘<h2><span itemprop=”name”>’ . $title . ‘</span></h2>’;
}
if ($duration != ”){
$video_tag .= ‘<meta itemprop=”duration” content=”‘ . $duration . ‘” />’;
}
if ($thumbnail != ”){
$video_tag .= ‘<meta itemprop=”thumbnailUrl” content=”‘ . $thumbnail . ‘” />’;
}
$video_tag .= ‘<meta itemprop=”embedURL” content=”http://youtu.be/’ . $src . ‘” />’;
$video_tag .= ‘<div class=”video-container”><iframe src=”//www.youtube.com/embed/’ .$src. ‘?hd=1″ frameborder=”0″ allowfullscreen></iframe></div>’;
if ($description != ”){
$video_tag .= ‘<span itemprop=”description”>’ . $description . ‘</span>’;
}
$video_tag .= ‘</div><br />’;
return $video_tag;
}
add_shortcode(‘youtube’, ‘youtube_shortcode’);
src –youtube id for the video.
title – The title to be used for the video; It will be displayed with H2 tag.
duration –duration of the video. The hour, minute and second format must be used such as TH01M10S05
thumbnail – thumbnails image.
description – This is used to describe/ publish something about the video.
Here is an example of the short code used for an YouTube video-
[youtube src=”SHxP5Jd9Lm8″ title=”Rename Multiple Files Through Automator” duration=”T6M18S” thumbnail=”test.jpg” description=”This is a test embed”]
Make the video responsive-
The purpose of embedding a video should be that of one which is responsive /adjusts according to the screen size.
/************ Responsive Video *********/
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Verification of Schema Markups-
Posting adding codes in function.php and style.css, do check if the markup is working correctly. Go to Google Structured Data Testing Tool, key in the url and check the schema markups. A screen shot is attached for your reference.
This example explains the function embedding a video in the Genesis 2.0 framework; the code is generic however and may be used with any theme if you may be able to assess positions to insert in the PHP code and CSS style.
Embedding Responsive videos in a Genesis 2.0 framework with the schema mark up included gets as easy as that! Genesis 2.0 is the direction to head for your responsive website!
Leave a Reply