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
info@elgg.org
Security issues should be reported to security@elgg.org!
©2014 the Elgg Foundation
Elgg is a registered trademark of Thematic Networks.
Cover image by RaĆ¼l Utrera is used under Creative Commons license.
Icons by Flaticon and FontAwesome.
- Shouvik Mukherjee@shouvik
Shouvik Mukherjee - 0 likes
- TahoeBilly@TahoeBilly
TahoeBilly - 0 likes
- TahoeBilly@TahoeBilly
TahoeBilly - 0 likes
- TahoeBilly@TahoeBilly
TahoeBilly - 0 likes
- TahoeBilly@TahoeBilly
TahoeBilly - 0 likes
- TahoeBilly@TahoeBilly
TahoeBilly - 0 likes
You must log in to post replies.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&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">
<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">
<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 -->
No luck, thanks for trying!