SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with video object overlapping menu items

    I've worked out most css problems but I can't find any css that will make the drop down menu on my site sit on top of the YouTube video that you can see here: http://www.the-bizness.co.uk

    If you click on Home Page or Multimedia the drop-down menu is behind the video clip.

    Very annoying. Any help appreciated!

  2. #2
    SitePoint Zealot Enzyme Online's Avatar
    Join Date
    Jun 2007
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know if a z-index would work?
    I don't like using them though because they're pretty sketchy.
    I like my html and css nice and clean

    but then again I don't like drop down menus either
    Now up and running!
    Enzyme Online | Professional and Affordable Web Design

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    z-index won't be any use here as the movie is placed on top of everything by default.

    You would probably have to convert the movie to flash and then there are methods for manipulating the stacking order.

    Just move it out of the way - its the easiest choice

    Or perhaps try a script like this.

  4. #4
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this where you have your youtube code in the html. Please note the bold that I added in two places for the wmode:
    Code:
    <object width="250" height="220">
    <param name="movie" value="http://www.youtube.com/watch/v/dPvjIWheGa0"></param>
    <param name="wmode" value="transparent">
    <embed src="http://www.youtube.com/watch/v/dPvjIWheGa0" type="application/x-shockwave-flash" width="250" height="220" wmode="transparent">
    </embed></object>
    Joe

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And get rid of the EMBED tags... sheesh.

    http://www.alistapart.com/articles/byebyeembed and http://www.alistapart.com/articles/flashsatay should be required reading (IMHO).

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Sorry, I didn't check if it was already a flash movie. As Young72 said above you can add transparent or opaque to allow the z-index to take effect.

    See the sticky thread in the flash form for more info.

    Here is a quick example using your movie.

    http://www.pmob.co.uk/temp/drop-down...ect-object.htm

  7. #7
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your excellent and interesting replies - I'm just a hobbyist trying to manipulate some of the code, learning as I go along.

    The problem with using a Joomla type site is that the code you see is not actually in the page until it is created "on the fly" by the module that is called from the index file template.

    The code that is in the template is:

    <table class="mainbody" cellspacing="0" cellpadding="0">
    <tr valign="top">
    <td class="mainbody">
    <?php if(mosCountModules('user3') or mosCountModules('user4')) : ?>
    <table class="usermodules" cellspacing="15">
    <tr valign="top">
    <?php if(mosCountModules('user3')) : ?>
    <td class="usermodules">
    <?php mosLoadModules('inset', -3); ?>
    <?php mosLoadModules('user3', 1); ?>
    <?php endif; ?>
    <tr>
    <td>
    <?php if(mosCountModules('user4')) : ?>
    <?php mosLoadModules('user4', 1); ?>
    </td>
    <tr>
    </td>
    <?php endif; ?>
    </tr>
    </table>
    which pulls in a module that allows me to select a video from Youtube and to display it. The only code I can find that the module uses is:

    <?php
    /**
    * 4You module - for Joomla 1.0.8
    *
    * @version 0.1 2006-04-06
    * @Copyright (C) 2006 Konrad Gretkiewicz - kgretk@anetus.com, www.anetus.com
    * @ All rights reserved.
    * @license http://www.gnu.org/copyleft/gpl.html GNU/GPL
    * This program is free software; you can redistribute it and/or
    * modify it under the terms of the GNU General Public License (GPL)
    * as published by the Free Software Foundation.
    * This program is distributed in the hope that it will be useful,
    * but WITHOUT ANY WARRANTY; without even the implied warranty of
    * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
    * See the GNU General Public License for more details.
    */

    defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );

    $text1 = $params->get( 'text1');
    $c1 = $params->get( 'c1');
    $text2 = $params->get( 'text2');
    $c2 = $params->get( 'c2');
    $width = $params->get( 'width');
    $height = $params->get( 'height');
    $link1 = $params->get( 'link1');
    $play = $params->get( 'play');

    $dw=160;
    $dh=130;

    $warn="<div style=\"text-align:center;font-size:14px;\">enter valid url!</div>";

    ?>

    <?php if (strpos($link1,"http:")===false || strpos($link1,"http:")>0) echo $warn;
    else { ?>

    <div style="<?php echo $c1; ?>"><?php echo $text1; ?></div>

    <object width="<?php if (is_numeric($width)) echo $width; else echo $dw; ?>" height="<?php if (is_numeric($height)) echo $height; else echo $dh; ?>">
    <param name="movie" value="<?php echo $link1; if ($play) echo "&autoplay=1"; ?>"></param>
    <embed src="<?php echo $link1; if ($play) echo "&autoplay=1"; ?>" type="application/x-shockwave-flash" width="<?php if (is_numeric($width)) echo $width; else echo $dw; ?>" height="<?php if (is_numeric($height)) echo $height; else echo $dh; ?>">
    </embed></object>

    <div style="<?php echo $c2; ?>"><?php echo $text2; ?></div>

    <?php } ?>
    Clever stuff really! Except that it is so user-friendly I can't find a way to hack the wmode bit!

    Often there is an option to use css styling code but not for this one so it looks like I'll have to contact the author.

  8. #8
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found correct location for wmode="transparent"

    <object width="<?php if (is_numeric($width)) echo $width; else echo $dw; ?>" height="<?php if (is_numeric($height)) echo $height; else echo $dh; ?>">
    <param name="movie" value="<?php echo $link1; if ($play) echo "&autoplay=1"; ?>"></param>
    <embed src="<?php echo $link1; if ($play) echo "&autoplay=1"; ?>" type="application/x-shockwave-flash" wmode="transparent" width="<?php if (is_numeric($width)) echo $width; else echo $dw; ?>" height="<?php if (is_numeric($height)) echo $height; else echo $dh; ?>">
    </embed></object>

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi, You need to add it in 2 places as mentioned above


    Code:
    <object width="<?php if (is_numeric($width)) echo $width; else echo $dw; ?>" height="<?php if (is_numeric($height)) echo $height; else echo $dh; ?>">
    <param name="movie" value="<?php echo $link1; if ($play) echo "&autoplay=1"; ?>"></param>
    <param name="wmode" value="transparent">
    <embed src="<?php echo $link1; if ($play) echo "&autoplay=1"; ?>" type="application/x-shockwave-flash" wmode="transparent" width="<?php if (is_numeric($width)) echo $width; else echo $dw; ?>" height="<?php if (is_numeric($height)) echo $height; else echo $dh; ?>">
    </embed></object>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •