Fix Drop Down Menu behind YouTube Videos

We get asked a lot of times about Z index’s to fix drop down menus hiding behind a youtube video.

There is many different ways to fix this problem but it seems you are fighting against Internet Explorer each time you fix this in another browser.

To explain the problem, when you add the iframe to your code to call the YouTube video for example you will use:-

https://www.youtube.com/embed/InDMh5s0-q0

No in the browser no matter what you do you get a z-index greater then everything else which means that YouTube video will be overlayed on top of anything and this is why you bang your head against the wall fixing with CSS.

https://www.youtube.com/embed/InDMh5s0-q0?wmode=opaque

To overcome this issue you can tell the YouTube video how to behave adding the following code:-

<iframe class="youtube-player" type="text/html" 
width="640" height="360"
src="http://www.youtube.com/embed/InDMh5s0-q0?wmode=opaque" 
frameborder="0"></iframe>

This fix works and the drop down menu will appear over the YouTube video. But the problem is you have to remember to add this to each video you embed so here a fix you can add to the header of your website coding and it will automatically add the required fix so you can embed normally and let the coding do the hard work.

function addToQueryString(url, key, value) {
    var query = url.indexOf('?');
    var anchor = url.indexOf('#');
    if (query == url.length - 1) {
        // Strip any ? on the end of the URL
        url = url.substring(0, query);
        query = -1;
    }
    return (anchor > 0 ? url.substring(0, anchor) : url)
         + (query > 0 ? "&" + key + "=" + value : "?" + key + "=" + value)
         + (anchor > 0 ? url.substring(anchor) : "");
}

YouTube Video Controls

If you are using YouTube and do not wish to show other videos afterwards then you can use the command to prevent showing suggested videos when the video finishes.

To do this you simply add “?rel=0” at the end of the URL for the YouTube video, example:-

Drop Down Menu Drops Behind YouTube video

This is something on our website we have to deal with and to make the drop down menu sit on top of the video you can use the command “?wmode=transparent”.

An example of this would be :-

What is this WordPress Message from the Hosting Companies

There are many shared hosting companies that are pulling there hair out due to increase traffic to WordPress websites.

A well trusted company such as HEART INTERNET for example have put this message up:-

Current System Status

Access to WordPress Admin

Fri, 12 Apr 2013 13:07:24 +0100

We are seeing increased traffic to a large number of WordPress sites on our shared hosting platform. The attack is not unique to ourselves and is affecting many hosting providers worldwide. Many providers have blocked access to the Admin area of WordPress altogether, however we do not want to take this approach as it will also prevent you from administering your own website. Instead, when accessing your WordPress Admin Area you may find that you are prompted for a username and password not previously required. The credentials for this login are:

Username: ***********
Password: ***********

As soon as normal service is resumed, this prompt will be removed and the above credentials will no longer be required. We appreciate your patience during this time, and we will update this page once this has been resolved.


Worldwide Brute-Force Attack

Go Daddy have put this message up:-

Web Hosting April 11, 2013 at 11:06 AM

We continue to mitigate the Internet-wide attack, but customers should be able to access their admin pages. If you need to strengthen your password, we recommend referring to x.co/strongpass for guidance. Thanks for your patience.We are aware of an ongoing, industry-wide attack attempting to gain access to customers’ websites. While we mitigate it, you might not have access to admin pages for Joomla! or WordPress. Your site, however, will remain online. To keep your site and your information secure, we recommend changing your password when you regain access to your site.

What Go Daddy Are Doing

Our Security team continues to identify these attacks, down to the IP address, and block anything that looks malicious. Additionally, we’ve installed new features on every single one of our thousands of servers to block these bad actors more quickly.

What You Can Do

Regardless of whether you use WordPress or Joomla! for your website, this worldwide attack could affect you. That’s why it’s imperative that you use strong passwords.

We all know that “password123” is not a wise idea for a password, but neither are dictionary words, your dog’s name, or the name of the street you live on. Attackers have libraries of the most common passwords, and use those lists in attacks like we’re experiencing.

The tougher and more sophisticated your password, the more difficult it will be for an attacker to gain access

Create a password without a generator

To create a password you can use password generators or you can create a php file edited and upload this to your server.

The file should contatin:-

<?php
// Password to be encrypted
$clearTextPassword = ‘passwordplease’;

// Encrypt password
$password = crypt($clearTextPassword, base64_encode($clearTextPassword));

// Print encrypted password
echo $password;
?>

If you save this file as generatepassword.php you upload and then go to:-

http://www.domainname.co.uk/generatepassword.php

This will show the password you selected.

If you are look for MD5 hash password generation then click here.

If you are looking for .htaccess password protection click here.