Embedded multi player (video)

**molendijk** · 07-16-2012, 11:35 AM

There should not be a problem if you have access to the post links. I can draw a line on top of the video, see this.
So the problem may be caused by the fact that you don't have programmatical access to the post links.
Good luck,
Arie.

**rexi** · 07-16-2012, 09:58 PM

Hello Mr.Molendijk,...

Thank you for all.
Sorry if you can't understand me.Now I will give example this problem on the page bottom.
If I looking links with IE,..it's working normal,..but I am using FF,..and I tested with Google browser,..same problem like FF,..
Could be problem with "display block" ????
On this page you will see when you move on link "HOME",..this is working,..but all links right side no work "click" because video is there even not show it.Just is block all dimension how is video.

This is page.

**molendijk** · 07-16-2012, 10:55 PM

Just replace

Code:

<div style="margin-top:40px;margin-bottom:40px;">
<ul class="semiopaquemenu">

with:

Code:

<div style="position:relative; z-index:1; margin-top:40px;margin-bottom:40px;">
<ul class="semiopaquemenu">

Arie.

**rexi** · 07-17-2012, 01:30 AM

Yes,..over mouse link working,..but now this menu is over video when is on.

**molendijk** · 07-17-2012, 09:06 AM

That's a question of zIndexing. The following will work. I left your original file intact as much as possible, but I had to correct quite a few errors. Also, I had to remove some styles in order for this post not to exceed the allowed length.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>ddr4</title>
<style type="text/css">
body {font-family: verdana; font-size:12px; color: #333; background-color:#ccc; text-align:center;}
#video_container, #hider1, #hider2
{position:absolute; left:50%; top:50%; margin-top:-170px; margin-left:-310px; width: 550px; height:300px; overflow:hidden;}
#hider1, #hider2{background:black;color:white; display:none;}
#hide_button{position: absolute; left: 50%; top:50%; margin-top:-170px; margin-left: 225px; display: none; z-index:2; font-family: verdana; font-size: 12px; cursor: pointer; font-weight: bold; background: black; color: white}
ul.semiopaquemenu{ /* main menu UL */
font: normal 13px Georgia; width: 600px; background: #98A877; padding: 5px 0 5px 0; margin: 0; text-align: left; border:#444444 1px solid;
}

ul.semiopaquemenu li{display: inline;}
ul.semiopaquemenu li a {color:#444444; cursor:pointer; padding: 4px 8px 4px 8px; text-decoration: none; margin-left: 10px; border-left:#98A877 1px solid; border-right:#98A877 1px solid;}
ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected3 {color: #000000; background: url(http://i46.tinypic.com/rc99n5.jpg); border:#444444 1px solid; padding-top: 12px; padding-bottom: 12px; 
}
div#kontejner { text-align:left; }
div#footer { text-align:center; }
div#kontejner { width:800px; margin:0 auto; background-color:#fff;border:#6E6E6E 1px solid; margin: 40px;margin-left:100px;margin-top:200px;}
div#blog { float:left; width:780px; padding:10px 0; margin-left:20px;}
</style>

<script type="text/javascript"> 
/*Contractible Headers script-Dynamic Drive (www.dynamicdrive.com)
This notice must stay intact for legal use. Last updated Mar 23rd, 2004.
Visit http://www.dynamicdrive.com/ for full source code*/ 
var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)
if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('<\/style>')
}
function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}}
function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}}
function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}}
function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}
function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}}
return returnvalue;
}
function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}
function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}
document.cookie=window.location.pathname+"="+selectedItem
}
function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0" 
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate
</script>  

<script type="text/javascript">
function include_video_prep(url)
{
video='<object id="the_video" type="application/x-shockwave-flash"  style="position:absolute;width:100%;height:100%;" data=\''+url+'&vq=large\'><param name="movie" value='+'"'+url+'"'+'><param name="allowFullScreen" value="true"><param name="flashvars" value="autoplay=1"><param name="wmode" value="transparent"><param name="allowNetworking" value="all" ><param name="allowscriptaccess" value="always"><\/object>'

setTimeout("document.getElementById('video_container').innerHTML=video",0);
}
function include_video(which)
{
document.getElementById('hide_button').style.display='block';
document.getElementById('hider1').style.display='block';
document.getElementById('hider2').style.display='block';
document.getElementById('video_container').style.background='black';
document.getElementById('video_container').style.color='white';
document.getElementById('video_container').style.zIndex=1;
include_video_prep(which);
setTimeout("document.getElementById('hider1').style.display='none'; document.getElementById('hider2').style.display='none'",0); 
}
</script>
</head>
<body>
<div id="kontejner">
<div id="zaglavlje"></div>
<div id="blog">  

<div id="hide_button" title="Stop video" onclick="this.style.display='none';document.getElementById('video_container').innerHTML=''; document.getElementById('video_container').style.background='';document.getElementById('video_container').style.color=''; document.getElementById('video_container').style.zIndex=0;"> X </div>
<div id="video_container" ></div>

<div id="hider1">
<iframe style="position:absolute;width:100%;height:100%;" src="http://www.youtube.com/apiplayer" frameborder="0"></iframe>
</div>
<div id="hider2" ></div>

<div style="  CURSOR: pointer" onclick="expandcontent('K6')"><font size="2" color="#800000">MENU</font></div>
<div id="K6" class="switchcontent" style="position:absolute;z-index:100">

<div style='position:fixed; left:50%; top:50%; margin-top:-170px; margin-left:-310px;WIDTH: 100px;height:120px;background-color:#C7CFB4;padding:15px;border:#353B27 1px solid;'>

<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/Cux1bM35e1c?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Sibelius</a><br >  
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/LB3VfxfBlnY?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Errol</a><br >  
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/jUvcyyU7UB4?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Arkansas</a><br > 
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/jTls82o-ChA?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Chimp</a><br >  
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/Wz1W_omigwg?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Spooky</a>

<div style="position:relative; CURSOR: pointer; margin-top:10px;text-align:right;"onclick="expandcontent('K6'); "><font face="Tw Cen MT"><font size="2" color="#873800">close</font></font></div>

</div></div>

<div style="position:relative;margin-top:40px;margin-bottom:40px;">
<ul class="semiopaquemenu">
<li><a href="http://ddr4.blogger.ba/">Home</a></li>
<li><a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/Wz1W_omigwg?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Spooky</a></li>
<li><a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/jTls82o-ChA?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Chimp</a></li>
<li><a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/jUvcyyU7UB4?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Arkansas</a></li>
<li><a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/LB3VfxfBlnY?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Errol</a></li>
<li><a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/Cux1bM35e1c?version=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0')">Sibelius</a></li>
</ul>
<div class="bottombar"></div>
</div></div>

<div id="footer">
<p>2012</p>
</div>

</div>
</body>
</html>

Arie

**rexi** · 07-17-2012, 02:39 PM

OK,..you had lots work about that.Thank you.
Now is working normal on the changed HTML cod..I will check how is working on the post.
Thank you so much for all.

**rexi** · 08-02-2012, 11:14 PM

Hello Mr.Molendijk,...
Sorry,but it is not working on the blog.
So,even video is not show on the page,..the any link which is on the location when is show video,not working.Links is disable.
When is page move down,..same problem on same location which need be video,..links is not over mouse work.

Please don't change anything with CSS HTML code blog.Because after blog loosing something,and not working normal.
With IE is OK,..but other browser not working.

This page.

**molendijk** · 08-03-2012, 09:30 AM

Hello Rexi,
I'm afraid I don't understand what you mean. Your music links are working on my machine with both IE and Firefox.
Arie.
===

**rexi** · 08-03-2012, 06:01 PM

Hello,..
Sorry for confusion,..video working,..links music working.
But location where video show,..under links on the post not working because block video ,even it is not show.
Tray move mouse on all links on the post,..you will find that links not working on the place where need be video.This is same situation when page move down.
So,..no problem about video,..it working good,..problem is links on the page/post ,..or any mouse over link is block,because place under show video,even no video there.

I am wrote this problem above on: ( 07-16-2012, 02:58 PM ).
If you still not understood me,..sorry,no problem, I am not need answer...THANKS.

**molendijk** · 08-03-2012, 06:54 PM

OK, I understand you now.
Replace this part:

Code:

<style type="text/css">
{font-family: verdana; font-size:12px}
#video_container, #hider1, #hider2
{position:fixed; left:50%; top:50%; margin-top:-100px; margin-left:-286px; width: 500px; height:250px; overflow:hidden; }
#hider1, #hider2{background:black;color:white; display:none;}
#hide_button{position: fixed; left: 50%; top:50%; margin-top:-98px; margin-left: 190px; display: none; z-index:1; font-family: verdana; font-size: 12px; cursor: pointer; font-weight: bold; background: black; color: white;}
</style>

<script type="text/javascript">
function include_video_prep(url)
{
video='<object id="the_video" type="application/x-shockwave-flash"  style="position:fixed;width: 500px; height:250px;" data=\''+url+'&vq=large\'><param name="movie" value='+'"'+url+'"'+'><param name="allowFullScreen" value="true"><param name="flashvars" value="autoplay=1"><param name="wmode" value="transparent"><param name="allowNetworking" value="all" ><param name="allowscriptaccess" value="always"><\/object>'

setTimeout("document.getElementById('video_container').innerHTML=video",0);
}

function include_video(which)
{
document.getElementById('hide_button').style.display='block';
document.getElementById('hider1').style.display='block';
document.getElementById('hider2').style.display='block';
document.getElementById('video_container').style.background='black';
document.getElementById('video_container').style.color='white';

include_video_prep(which);
setTimeout("document.getElementById('hider1').style.display='none'; document.getElementById('hider2').style.display='none'",0); 
}
</script>

<div id="hide_button" title="Stop video" onclick="this.style.display='none';document.getElementById('video_container').innerHTML=''; document.getElementById('video_container').style.background='';document.getElementById('video_container').style.color='';"> X </div>

with this:

Code:

<style type="text/css">
{font-family: verdana; font-size:12px}
#video_container, #hider1, #hider2
{position:fixed; left:50%; top:50%; margin-top:-100px; margin-left:-286px; width: 500px; height:250px; overflow:hidden; z-index:-1}
#hider1, #hider2{background:black;color:white; display:none;}
#hide_button{position: fixed; left: 50%; top:50%; margin-top:-98px; margin-left: 190px; display: none; z-index:1; font-family: verdana; font-size: 12px; cursor: pointer; font-weight: bold; background: black; color: white;}
</style>

<script type="text/javascript">
function include_video_prep(url)
{document.getElementById('video_container').style.zIndex=0
video='<object id="the_video" type="application/x-shockwave-flash"  style="position:fixed;width: 500px; height:250px;" data=\''+url+'&vq=large\'><param name="movie" value='+'"'+url+'"'+'><param name="allowFullScreen" value="true"><param name="flashvars" value="autoplay=1"><param name="wmode" value="transparent"><param name="allowNetworking" value="all" ><param name="allowscriptaccess" value="always"><\/object>'

setTimeout("document.getElementById('video_container').innerHTML=video",0);
}

function include_video(which)
{
document.getElementById('hide_button').style.display='block';
document.getElementById('hider1').style.display='block';
document.getElementById('hider2').style.display='block';
document.getElementById('video_container').style.background='black';
document.getElementById('video_container').style.color='white';

include_video_prep(which);
setTimeout("document.getElementById('hider1').style.display='none'; document.getElementById('hider2').style.display='none'",0); 
}
</script>

</head>
<body>
<div id="hide_button" title="Stop video" onclick="this.style.display='none';document.getElementById('video_container').innerHTML=''; document.getElementById('video_container').style.background='';document.getElementById('video_container').style.color='';document.getElementById('video_container').style.zIndex=-1;"> X </div>

That should work.
===
Arie.