Web development

How to make Youtube Iframe Responsive

The default Youtube video iframe embed code is anything but elegant and will break most responsive web designs if you try to embed a Youtube video on your website. Fortunately there’s a workaround for everything and we can easily turn any Youtube embed responsive using some simple CSS magic. Here’s how:

Youtube embed responsive

When you use the original iframe embed code the result may look something like this, where the red box is just a normal wrapper and our video is breaking outside of it:

Responsive iframe embed code not fitting

To counter this, the first thing we do is remove the fixed width and height from the Youtube iframe code altogether. We won’t be needing these any more!

<iframe width="420" height="315" src="https://www.youtube.com/embed/rNRNYZATe9g" frameborder="0" allowfullscreen></iframe>

Then we place the entire iframe inside a relatively positioned container and absolute position our Youtube video inside of that wrapper like so:

CSS

.wrapper {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
}
.wrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

HTML

<div class="wrapper">
 <iframe src="https://www.youtube.com/embed/rNRNYZATe9g" frameborder="0" allowfullscreen></iframe>
</div>

The result is an elegant Youtube video that no longer breaks our fluid website design and will fit inside any parent container perfectly.

Youtube embed responsive fitting container

Tool to make iframe responsive

It can get quite tedious to manually have to do this every time you need to make a Youtube iframe responsive or have to publish a fluid youtube video quickly on your blog so I have built a neat little online tool especially for You! (and for me for that matter).

Using this tool You can make Youtube video responsive simply by entering the URL of your video and clicking submit. The generator will output the above code with your video embedded responsively inside the wrapper just like I explained in this article.

If you think this is pretty neat why don’t you hit the like and share buttons below and help me out a little? ;)

Share!

JSON-LD articleBody parsing error when testing Structured Data

When setting up Structured Data using JSON-LD for the first time you could run into a problem with the articleBody property which mostly consists of a lot of html tags, quotation marks, etc. These can cause all sorts of parsing errors when you run your page through the Google’s Structured Data testing tool, but thankfully you can solve the issue with just one php function.

There was an error parsing your JSON-LD

As a developer I’m sure you can relate to the pain I felt when I finally got the whole json-ld code implemented on my WordPress blog just to see this error message show up in Structured Data testing tool.

json ld error parsing articlebody structured data element

It’s true that Google hasn’t really put a lot of effort into explaining what’s wrong with your code, but at least they’re highlighting the area where the error occurred which should give us some clues for coming up with a solution on our own. On the screenshot you can see that a parsing error happened when it reached “G so I immediately realised there was something wrong with the double quotes.

The solution

Since I’m relatively new to json-ld I sometimes miss a comma or a colon, but with this particular problem I had to somehow escape the double quotes only because when you escape all of the quotes you’ll run into even more problems that I am not going to cover here today.

So, how do you escape only the double quotes and leave single quotes untouched?

Turns out php has a great little function for that:

addcslashes($str, ' " ')

What this does is it takes your string ($str) and escapes only the characters you explicitly tell it to escape. The example above will escape double quotes only because that’s what we tell it to do.

Real world example

Using the above function I implemented it along with the wp_strip_all_tags() function for WordPress because let’s only send plain text to search engines inside the articleBody property ;)

"articleBody": "<?php echo addcslashes (wp_strip_all_tags( get_the_content() ),'"');?>",

As you can see I’m echoing the WordPress post content by stripping all of its html tags and making sure double quotes are escaped properly as well.

You should do the same to your description property if you use it because who knows, maybe you have used double quotes in there too?

ArticleBody property parsing error json ld fixed

After doing this I no longer get the json-ld parsing error and you should just ignore the one warning I have in my Article results because that’s about an image and its width not being big enough. Completely unrelated!

Share!
Filed under: Web developmentTagged with: , ,

How to add unique meta description tags in WordPress without plugins

When I checked my website for errors in the Google Search Console earlier this morning, I noticed a warning about duplicate meta descriptions on my WordPress website. I had 205 pages with duplicate tags and at first I didn’t think much of it, but I decided to find out the significance in terms of better SEO just in case. I was shocked to realise that having duplicate meta description tags throughout your WordPress blog is a bad idea and Google doesn’t like it one bit!

Google: Don’t duplicate meta description tags

Google’s Matt Cutts has officially stated in his video that it’s better to have no meta description tag than to have numerous duplicate meta description tags on all of your pages and categories. This is especially frustrating because by default most WordPress templates have only the one description tag displayed throughout the entire website. Check out this video with Matt explaining everything:

Unique meta description without plugins

It’s clear that Google doesn’t endorse the use of duplicate description tags and there are numerous plugins available that try to work around it (YOAST for example) and while I don’t personally have anything against these plugins, one might still consider avoiding them in order to gain better website loading speeds because it’s common knowledge that having too many plugins active on your WordPress site can actually slow down the loading speeds and make the end user experience that much more annoying.

Just a few lines of code

In your header.php file remove the default <meta name=“description” content=“Your description”/> and instead use the following code:

<?php if ( is_home() ) { ?>
<meta name="description" content="Your main and most important description shown on homepage"/>
<?php } ?>
<?php if ( is_single() OR is_page() ) { ?>
<meta name="description" content="<?php { setup_postdata($post); echo esc_attr(htmlentities(get_the_excerpt())); } ?>"/>
<?php } ?>

The above code uses conditional statements to check whether the currently displayed page is either a homepage, a single post or a single page and then uses “Your main and most important description shown on homepage” on your homepage and the default post excerpt in the description of posts and pages respectively.

In my experience you don’t really need to display the description tag anywhere else so I removed it from elsewhere. And in case you’re worried, Google is fairly good at coming up with descriptions for the rest of your page so your search results should still look very nice.

Double check just in case

This code works on my template, but you should still double check so after editing the header.php and replacing it with the original try refreshing your page (ctrl + F5) and then view the page source, especially the meta description tag, and see if it’s working. First try it on the homepage (main index) and then click on any posts or pages you may have and view the source on those pages also. If you see the post excerpt inside the description tag it means everything is working as it’s supposed to.

Share!

How to make a closable hover header div for your website announcements or ads using CSS and Javascript

html and css programming language pictureIt’s perfect for site news

In this tutorial you will learn how to make a “hovering” header for your website news, announcements or ads. I am currently using the same technique on this blog too and it should have loaded up by now. (not any more!) As you can see it can be easily closed by the red X button and it’s “hovering” over the main content so it keeps showing even when your users scroll down.

The requirements

This script uses Font Awesome and jQuery via CDN. This basically just means that you need to add the following code inside your <head></head> tags:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The HTML and CSS parts

This will be the face for your news box and you can customize things like font size, background color, padding, etc. Add the following code right after your opening <body> tag:

<div id="announcement">
 <span id='message'>Your message goes here. You can add a link if you want or whatever you like.</span>
 <span id='close'><a href="#" title="Close"><i class='fa fa-times'></i></a></span>
 <div id="delimiter"></div>
 </div>

* I’m using the delimeter div to clear both floats so it will not cause any styling errors.

Here is my CSS

Customize it to fit the design of your website!

#announcement {
    padding: 0;
    margin: 0;
    display: none;
    background: #CCFF99;
    height: auto;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
 z-index: 9999;
}
#message {color: #000; font-size: 1em; float: left; padding: 0 2.1% 0 2.1%;}
#close {position: fixed; top: 0; right: 0; padding: 0 2.1% 0 2.1%;}
.fa-times {color: red;}
#delimiter { clear: both; }

* The position: fixed; along with top: 0; and left: 0; are what make the div hover over the main content. Same goes for the close button- just replace left with right to put it on the top right side of your page.

* z-index is a useful property because it specifies the stack order of an element. By giving it an unrealistic value we make sure it will stay on top of every possible element on your page.

* I’m using display: none; so that it will only display after Javascript has determined that the page is fully loaded.

* The fa-times class is for our close button. Font Awesome is really awesome ;)

Finally the Javascript

This is what makes everything work nicely! Add this code inside your <head></head> tags:

<script>
 window.onload = function () {
 document.getElementById('close').onclick = function(){
 this.parentNode.parentNode.removeChild(this.parentNode);
 return false;
 };
 }
 $(document).ready(function() {
 $("#announcement").delay(2000).fadeIn(500);
 });
 </script>

* I use the window.onload function to execute the script only after the whole page has finished loading. If your user is waiting for the page to load and at the same time a news box appears, it might scare away a potential client.

* You should also notice the getElementById(‘close’) and $(“#announcement”). Do not change these, they are the ID’s of the close button and the news box itself.

Share!