Dag allemaal,
Ik probeer voor een website een div-element met daarin een Iframe met een embedded YouTube filmpje te hiden. Dit gaat goed in Safari en Firefox (ik gebruik een MacBook, 10.6.8), maar in Chrome blijft het YouTube filmpje op de achtergrond zichtbaar. Op het moment dat ik het YouTube divje hide, make ik een volgende visible. Deze komt wel goed in beeld, maar op de achtergrond is het YouTube filmpje nog zichtbaar. Het divje dat visible wordt heeft een opacity van 0.95, maar daar moet de achtergrond van een wrapper div in doorschemeren, niet het YouTube filmpje (deze bevindt zich dan immers in een hidden div). Is dit een Chrome probleem, heb ik iets verkeerd gecode, of is er een work-around?
Zie voor een voorbeeld: www.natuurverdubbelaars.nl
Klik dan bijv. op Het Idee of Projecten en dan schemert in Firefox de achtergrond door, maar in Chrome het YouTube filmpje.
De belangrijkste html en css heb ik hier onder staan, maar je kunt natuurlijk ook de source bekijken:
Wie heeft er een idee hoe dit verholpen kan worden? Het is vooral een esthetisch ding, de site werkt er wel prima mee, maar zou het toch graag verhelpen.
Ik probeer voor een website een div-element met daarin een Iframe met een embedded YouTube filmpje te hiden. Dit gaat goed in Safari en Firefox (ik gebruik een MacBook, 10.6.8), maar in Chrome blijft het YouTube filmpje op de achtergrond zichtbaar. Op het moment dat ik het YouTube divje hide, make ik een volgende visible. Deze komt wel goed in beeld, maar op de achtergrond is het YouTube filmpje nog zichtbaar. Het divje dat visible wordt heeft een opacity van 0.95, maar daar moet de achtergrond van een wrapper div in doorschemeren, niet het YouTube filmpje (deze bevindt zich dan immers in een hidden div). Is dit een Chrome probleem, heb ik iets verkeerd gecode, of is er een work-around?
Zie voor een voorbeeld: www.natuurverdubbelaars.nl
Klik dan bijv. op Het Idee of Projecten en dan schemert in Firefox de achtergrond door, maar in Chrome het YouTube filmpje.
De belangrijkste html en css heb ik hier onder staan, maar je kunt natuurlijk ook de source bekijken:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
| javascript (let hierbij op, de tweede functie wordt alleen gebruikt op de Wie zijn wij-pagina", om ook daar verschillende teksten te tonen, maar hiervoor zit ook wat code in de changePage functie, zodat deze standaard hiden en visible worden afhankelijk van of de about pagina getoond wordt).
var old_id = "home";
var old_about_id = "team";
function changePage(id) {
document.getElementById(old_id).style.visibility = "hidden";
document.getElementById(old_about_id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";
if (id=="about") {
document.getElementById('team').style.visibility = "visible";
old_about_id = "team";
}
old_id = id;
}
function changePageAbout(about_id) {
document.getElementById(old_about_id).style.visibility = "hidden";
document.getElementById(about_id).style.visibility = "visible";
old_about_id = about_id;
}
html:
aanroep om de visible div te veranderen:
<a href="javascript: changePage('projects')">*link*</a>
de beide div's
<div id="home"><iframe width="853" height="505" src="http://www.youtube.com/embed/02WlBnamtSc?wmode=opaque" frameborder="0" scrolling="no" allowfullscreen></iframe></iframe></div>
en een willekeurige andere div "projects"
<div id="projects"> <div class="maintext">*tekst*
</div>
</div>
css:
#home {
position: absolute;
top: 140px;
left: 210px;
visibility: visible;
background: #000000;
opacity: 1;
}
#projects {
position: absolute;
top: 140px;
left: 210px;
width: 853px;
height: 505px;
background: #FFFFFF;
opacity: 0.95;
visibility: hidden;
}
en de wrapper+container waar de achtergrond in zit:
#wrapper {
margin: 0 auto;
width: 1260px;
}
#sitecontainer
{
position: relative;
background: url(images/background.jpg);
background-repeat:no-repeat;
width: 1260px;
height: 719px;
padding: 0;
margin: 0;
} |
Wie heeft er een idee hoe dit verholpen kan worden? Het is vooral een esthetisch ding, de site werkt er wel prima mee, maar zou het toch graag verhelpen.
