Need help on finishing theme with "chromeless" YouTube in header

I have a very hip theme and it is about to get much better! I am trying to get a embedded YouTueb video in the middle of the header. I have it working, but struggling getting the header laid out with image left of video and image right of video. I realize a Flash header with the YouTube installed may be ideal, but I would like to get it working in HTML.

If anyone would like to help, I will provide you a copy of the theme when we are complete.

Localpeeps.net is test site. Mypaintersplace.com production site.

William

  • Oh you mean putting the youtube video in the middle? Ok, I might be able to help you. PM me your email and I will get in touch with you there.

  • Here is what Shouvik kindly did get a youtube video in my header!

    <?php

        /**
         * header contents
         * This file holds the header output with the site logo
         * @author Filer
         **/
         
    ?>

    <div id="page_container">
    <div id="page_wrapper">

    <div id="layout_header">
    <div id="wrapper_header">
    <div style="float:right">
       
            <a href="<?php echo $vars['url'] ?>pg/groups/world/"><img style="padding-top:43px" src="<?php echo $vars['url']; ?>mod/paintersplace/graphics/featured.png" height="43px" width="200px"></a>
         
        </div>

        <!-- display the page title -->
        <div style="padding:0 5px 0 5px">
        <div style="width:675px; float:left">
        <div style="float:left; width:200px;">
        <?php if (isloggedin()){ ?>
            <a href="<?php echo $vars['url'] ?>pg/photos/new/<?php echo $_SESSION['user']->username ?>"><img style="padding-top:43px" src="<?php echo $vars['url']; ?>mod/paintersplace/graphics/upload.png" height="43px" width="200px"></a>
        <?php }else{ ?>
            <a href="<?php echo $vars['url'] ?>pg/registration"><img style="padding-top:43px" src="<?php echo $vars['url']; ?>mod/paintersplace/graphics/login.png" height="43px" width="200px"></a>
        <?php } ?>
        </div>
       
        <div style="float:right; width:220px">


               
    </div>


    <div class="flashContainer" style="float:left; margin-left:30%; width: 220px; height: 130px;">

       


    <embed src="http://www.youtube.com/v/26ELpS3Wc4Q?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="220" height="130"></embed>



        <div class="controlDiv play"></div>

        <div class="progressBar">
            <div class="elapsed"></div>





           </div>
    </div>

       
       
        </div>
        <div class="clearfloat"></div>
       
    </div><!-- /#wrapper_header -->
    </div><!-- /#layout_header -->

  • Something like this is what I need in the video space, a "chromeless" vesrsion, when I replace it where Shouvik's youtube embed is above the graphics break up on the header.

    <div style="float:left; width:220px">
    <div class="flashContainer" style="width: 130px; height: 130px;">

        <object height="130" width="130" id="video_26ELpS3Wc4Q" type="application/x-shockwave-flash"
        data="http://www.youtube.com/apiplayer?enablejsapi=1&version=3"&gt;

            <param value="always" name="allowScriptAccess">
            <param value="transparent" name="wmode">
            <param value="video_id=26ELpS3Wc4Q&playerapiid=26ELpS3Wc4Q"
            name="flashvars">
            <param value="http://www.youtube.com/apiplayer?enablejsapi=1&version=3"
            name="movie">

        </$('#element').youTubeEmbed({
        video            : 'http://www.youtube.com/watch?v=u1zgFlCw8Aw',
        width            : 130,         // Height is calculated automatically
        progressBar    : false        // Hide the progress bar});>

        <div class="controlDiv play"></div>

        <div class="progressBar">
            <div class="elapsed"></div>




        position:relative;
        overflow:hidden;
    }

    .progressBar{
        display:none;
        position:absolute;
        width:auto;
        height:8px;
        left:20px;
        right:105px;
        bottom:20px;
        background-color:#141414;
        overflow:hidden;
        cursor:pointer;
       
        /* A light CSS3 bottom highlight */
       
        -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
        -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
        box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .progressBar .elapsed{
        position:absolute;
        width:0;
        height:100%;
        background-color:#1fa2f6;
        border-right:1px solid #49AFF0;
    }

    .controlDiv{
        /* Centering the control div */
        position:absolute;
        width:130px;
        height:130px;
        cursor:pointer;
        top:50%;
        left:50%;
        margin:-60px 0 0 -60px;
    }

    .controlDiv.play{
        background:url('img/play.png') no-repeat center center;
    }

    .controlDiv.replay{
        background:url('img/replay.png') no-repeat center center;
    }

    .controlDiv.pause{
        background:url('img/pause.png') no-repeat -99999px;
    }

    .flashContainer:hover .controlDiv.pause{
        background-position:center center;
    }

    /* Only show the progress bar when the video is playing */

    .flashContainer.playing:hover .progressBar{
        display:block;
    }

           </div>

  • Here is the code that gets the above. Does anyone have a suggestion?

    <?php

        /**
         * header contents
         * This file holds the header output with the site logo
         * @author Filer
         **/
         
    ?>

    <div id="page_container">
    <div id="page_wrapper">

    <div id="layout_header">
    <div id="wrapper_header">
    <div style="float:right">
       
            <a href="<?php echo $vars['url'] ?>pg/groups/world/"><img style="padding-top:5px" src="<?php echo $vars['url']; ?>mod/paintersplace/graphics/righthandtest.jpg" height="130px" width="385px"></a>
         
        </div>

        <!-- display the page title -->
        <div style="padding:0 5px 0 5px">
        <div style="width:385px; float:left">
        <div style="float:left; width:385px;">
        <?php if (isloggedin()){ ?>
            <a href="<?php echo $vars['url'] ?>pg/photos/new/<?php echo $_SESSION['user']->username ?>"><img style="padding-top:5px" src="<?php echo $vars['url']; ?>mod/paintersplace/graphics/lefthandtest.jpg" height="130px" width="385px"></a>
        <?php }else{ ?>
            <a href="<?php echo $vars['url'] ?>pg/registration"><img style="padding-top:5px" src="<?php echo $vars['url']; ?>mod/paintersplace/graphics/righthandtest.jpg" height="130px" width="385px"></a>
        <?php } ?>
        </div>
       
        <div style="float:right; width:385px">


               
    </div>


    <div class="flashContainer" style="float:left; margin-left:70%; width: 220px; height: 130px;">

       
    <object height="130" width="220" id="video_26ELpS3Wc4Q" type="application/x-shockwave-flash"
        data="http://www.youtube.com/apiplayer?enablejsapi=1&version=3"&gt;

            <param value="always" name="allowScriptAccess">
            <param value="transparent" name="wmode">
            <param value="video_id=26ELpS3Wc4Q&playerapiid=26ELpS3Wc4Q"
            name="flashvars">
            <param value="http://www.youtube.com/apiplayer?enablejsapi=1&version=3"
            name="movie">

        </$('#element').youTubeEmbed({
        video            : 'http://www.youtube.com/watch?v=u1zgFlCw8Aw',
        width            : 220,         // Height is calculated automatically
        progressBar    : false        // Hide the progress bar});>

        <div class="controlDiv play"></div>

        <div class="progressBar">
            <div class="elapsed"></div>




        position:relative;
        overflow:hidden;
    }

    .progressBar{
        display:none;
        position:absolute;
        width:auto;
        height:8px;
        left:20px;
        right:105px;
        bottom:20px;
        background-color:#141414;
        overflow:hidden;
        cursor:pointer;
       
        /* A light CSS3 bottom highlight */
       
        -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
        -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
        box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .progressBar .elapsed{
        position:absolute;
        width:0;
        height:100%;
        background-color:#1fa2f6;
        border-right:1px solid #49AFF0;
    }

    .controlDiv{
        /* Centering the control div */
        position:absolute;
        width:120px;
        height:120px;
        cursor:pointer;
        top:50%;
        left:50%;
        margin:-60px 0 0 -60px;
    }

    .controlDiv.play{
        background:url('img/play.png') no-repeat center center;
    }

    .controlDiv.replay{
        background:url('img/replay.png') no-repeat center center;
    }

    .controlDiv.pause{
        background:url('img/pause.png') no-repeat -99999px;
    }

    .flashContainer:hover .controlDiv.pause{
        background-position:center center;
    }

    /* Only show the progress bar when the video is playing */

    .flashContainer.playing:hover .progressBar{
        display:block;
    }

        <div class="controlDiv play"></div>

        <div class="progressBar">
            <div class="elapsed"></div>





           </div>
    </div>

       
       
        </div>
        <div class="clearfloat"></div>
       
    </div><!-- /#wrapper_header -->
    </div><!-- /#layout_header -->