STARIKOVS

Archive for October, 2012

In this article you’ll find how to force YouTube video showing under your html elements.

By default, YouTube video is showed over any html element. In my case, the problem refers to Dropdown Menu and Lightbox. For example, when Lightbox is appearing YouTube video overlaps it ignoring z-index. In general, you may run into this problem with any html element you want to position over YouTube video.

At the moment, YouTube video is added to html page via iframe. Inside the iframe YouTube creates all the stuff it needs to show the video. In the depth of iframe there’s Flash Player, by default. If HTML 5 is used to show the video there isn’t any Flash in iframe and there isn’t any problem with overlay. Flash is inserted to the browser using or

helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html

After reading the docs you can find an interesting attribute wmode and an interesting possible value of this attribute – transparent:

transparent – The SWF content is layered together with other HTML elements on the page.

That’s what we need! So, SWF content is Flash that we want to behave like other html elements.

Here is a schematic html code YouTube uses to show the video deep inside iframe:

1

  type="application/x-shockwave-flash" src="...">

Html should be like following to fix the problem with overlay:

1

  ="transparent" type="application/x-shockwave-flash" src="...">

Fortunately, it’s possible to toggle wmode attribute via iframe source parameters when inserting YouTube video to html:

1
2
3

  <iframe width="560" height="315" 
    src="http://www.youtube.com/embed/NeXMxuNNlE8?wmode=transparent" 
    frameborder="0" allowfullscreen></iframe>?

Take notice at src attribute and wmode parameter:

src=”http://www.youtube.com/embed/NeXMxuNNlE8?wmode=transparent“

Now, using this approach it’s possible to position Menu, Lightbox or any other html element over YouTube video or other flash/swf movie.

This problem appears not in all browsers, mostly in old browsers like IE, old versions of FireFox or WebKit. The test example is here:

http://jsfiddle.net/buhvf/1/

Here’s a code snippet in PHP of how to get image resolution. I mean image width and height.

There’re lots of approaches of doing that and I’ve tryed to find the short one.

1
2

  list($width, $height, $type, $attr) = getimagesize($path_to_image);
  // then you may use $width and $height variables

So, to get the image resolution you should write only one line of PHP code. Also, you can get other info about the image using the getimagesize function. $path_to_image is a path to the image, for example, “/tmp/sunset.jpg” or “C:\Temp\image.jpg”, and in your case, it’s a path to the image the resolution of which you want to get. You can find more help about this function in PHP documentation.

To use this function the GD library is required. You don’t need any other frameworks or third party libraries.

Everything was working well. But maybe a week ago, our system administrator was installing some stuff on all the machines for internal needs. After that my Apache web server hasn’t been started. Today, I needed to test something with PHP and I needed Apache for that. So, I started to investigate.

Here’s what Apache said:

Apache 2 is starting …

(OS 10048) Only one usage of each socket address (protocol/network address/port) is normally permitted. : AH00072: make_sock: could not bind to address [::]:4433.

(OS 10048) Only one usage of each socket address (protocol/network address/port) is normally permitted. : AH00072: make_sock: could not bind to address 0.0.0.0:4433.

AH00451: no listening sockets available, shutting down

AH00015: Unable to open logs

Apache could not be started

I’ve tryed to change a port number, but nothing changed. BTW, I don’t need SSL for my work, so I just tryed to comment this module in httpd.conf:

#LoadModule ssl_module modules/mod_ssl.so

After commenting mod_ssl.so Apache starts without any errors. So, it’s a workaround. But I still don’t know what’s the true problem.

I’ve just fixed very evil bug.

My web site works well on all the major browsers. But when I tested it on Android phone, using standard Android browser, I was surprised.. In some text fields or inputs, that browser sets my email. By the way, there’s nothing about email in the input name or id. Again, all the major desktop browsers don’t have this bug.

Despite on the setted value attribute for the input, Android browser’s autocomplete still sets its value. So, it even ignores the value attribute prefering the autocomplete’s value.

PHP:

 echo $n ?>">

Then, in HTML:

<input type="text" name="n" value="qwerty">

But Android browser sets my email to this field.

The fix of this problem is simple. I’ve just set autocomplete=”off” attribute for the inputs!

<input type="text" name="n" value="" autocomplete="off">