Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag21.09.2011 um 05:14 (UTC)    
Titel: CSS-Design:

Hallo liebe HPBKler,
ich möchte auf meiner Homepage (http://gygrusher.de.tl/) in meinem Design eine Videoladeleiste ( http://www.bilderhoster24.de/images/7qgg1gyl3r7qr3r9dqp9.jpg ) wie bei einem Youtube-kanal einbauen. Kann man das irgendwie über I-Frame oder so lösen?

Und kann man eine oder zwei Divs bei einer bestimmten Unterseite ausblenden?


Danke im Voraus& MFG Jamie
Beitrag21.09.2011 um 11:24 (UTC)    
Titel:

Hallo,

dein 1. Problem verstehe ich nicht ganz. Was willst du den über das iframe einbinden?
Bei youtube bekommst du ja den Code zum einbinden eines Videos. Binde am besten ein Video ein und erstelle dir einfach selbst eine Leiste mit Vorschau Bildern. Mit Javascript kannst du dann das eingebundene Video austauschen.

Zum ausblenden der divs auf bestimmten Seiten,kannst du auf der entsprechenden Seite eifach folgendes eingeben:
Zitat:
<style type="text/css">
Hier_der_selektor {
display:none;
}
</style>

Das musst du mit einem Selektor für das Element, welches du ausblenden möchtest ersetzen. Wenn dein Element die id a hat schreibst du #a
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag21.09.2011 um 13:04 (UTC)    
Titel:

Hallo,

erstmal danke für den Code! Ich hatte mir das so gedacht, das ich diese Videoleiste (siehe oberes bild) per I-frame einbinde. falls das zu umstänlich sein sollte, bitte ich um Hilfe, beim erstellen einer eigenen.

Danke& MFG jamie
Beitrag21.09.2011 um 15:37 (UTC)    
Titel:

germanyounggamers hat Folgendes geschrieben:
falls das zu umstänlich sein sollte, bitte ich um Hilfe, beim erstellen einer eigenen.

Das ist nicht zu umständlich, sondern nicht möglich! Wink Du kannst maximal die komplette Seite einbinden.

Was genau verstehst du nicht beim selbst machen? Du legst dir einfach 2 div an und fügst in eines dein erstes Video ein (code von youtube). In das andere kommen dann deine Vorschaubilder und der Text. Das javascript, welches du benötigst, um das Video auszutauschen, kann ich dir dann schreiben.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag21.09.2011 um 16:33 (UTC)    
Titel:

Ok. Dann wäre es nett, wenn du mir den entsprechenden Code geben könntest. Wink

Danke& MFG Jamie
Beitrag21.09.2011 um 23:25 (UTC)    
Titel:

Hier dein javascript:

Code:
<script type="text/javascript">
function changeVideo(url)
{
document.getElementById('videoelement').src = url;
}
</script>

Deinem iframe musst du die ID videoelement geben. Die Bilder verlinkst du auf folgende Art:

Zitat:
<a href="#" onclick="changeVideo('Hier die URL von Video 1'); return false;"><img ...></a>

<a href="#" onclick="changeVideo('Hier die URL von Video 2'); return false;"><img ...></a>

______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 22.09.2011, 01:27, insgesamt einmal bearbeitet
Beitrag22.09.2011 um 12:28 (UTC)    
Titel:

Ok. Hab's versucht.

Es klappt aber nicht so richtig-was ist falsch?

Über dem Design:
Zitat:
<div id="videoelement"> <iframe width="430" height="260" src="http://www.youtube.com/embed/2oKSIs6jTrE" frameborder="0" allowfullscreen></iframe></div>


<div id="extraDiv4"> script type="text/javascript">
function changeVideo(url)
{
document.getElementById('videoelement').src = url;
}
</script><a href="#" onclick="changeVideo('http://www.youtube.com/watch?v=gu0gTdHObYE'); return false;"><img width="180" height="120" alt="" src="http://i4.ytimg.com/vi/gu0gTdHObYE/default.jpg" /></a>
<br>
<a href="#" onclick="changeVideo('http://www.youtube.com/watch?v=2oKSIs6jTrE'); return false;"><img width="180" height="120" alt="" src="http://i3.ytimg.com/vi/2oKSIs6jTrE/default.jpg" />
</a>


CSS:
Zitat:
#videoelement {position: absolute;
left: 50%;
top: 275px;
margin-left: -313px; }

#extraDiv4 {position: absolute;
left: 50%;
top: 280px;
margin-left: 133px; }



Danke& MFG Jamie


Zuletzt bearbeitet von gygrusher am 22.09.2011, 13:30, insgesamt einmal bearbeitet
Beitrag22.09.2011 um 18:26 (UTC)    
Titel:

Hallo,

ich ändere es dir mal um, vielleicht habe ich mich auch undeutlich ausgedrückt Crying or Very sad

Zitat:
<div id="videobox"> <iframe id="videoelement" width="430" height="260" src="http://www.youtube.com/embed/2oKSIs6jTrE" frameborder="0" allowfullscreen></iframe></div>


<div id="extraDiv4"><script type="text/javascript">
function changeVideo(url)
{
document.getElementById('videoelement').src = url;
}
</script><a href="#" onclick="changeVideo('http://www.youtube.com/watch?v=gu0gTdHObYE'); return false;"><img width="180" height="120" alt="" src="http://i4.ytimg.com/vi/gu0gTdHObYE/default.jpg" /></a>
<br>
<a href="#" onclick="changeVideo('http://www.youtube.com/watch?v=2oKSIs6jTrE'); return false;"><img width="180" height="120" alt="" src="http://i3.ytimg.com/vi/2oKSIs6jTrE/default.jpg" />
</a>


CSS:
Zitat:
#videobox {position: absolute;
left: 50%;
top: 275px;
margin-left: -313px; }

#extraDiv4 {position: absolute;
left: 50%;
top: 280px;
margin-left: 133px; }

Du musst die URL aus dem entsprechenden iframe nehmen, sonst wird die youtube Seite eingebunden. Wink

Wenn ich nichts übersehen habe, sollte es nach dem du die richtige URL eingesetzt hast klappen.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag22.09.2011 um 18:43 (UTC)    
Titel:

Danke! es gibt nur ein Problem: Beim Klick auf das Vorschaubild eines anderen Videos wird diese nicht in der Videobox angezeigt. siehe: http://rusher-en.de.tl/
Beitrag22.09.2011 um 21:03 (UTC)    
Titel:

Zitat:
Beim Klick auf das Vorschaubild eines anderen Videos wird diese nicht in der Videobox angezeigt.

Natürlich nicht! Lese dir doch bitte die Antworten, die du bekommst richtig durch! Wink

Ich habe 2 mal geschrieben, welche URL du einsetzen musst! Da ich gerade festgestellt habe, wie youtube das macht Very Happy zeige ich es dir:


Zitat:
http://www.youtube.com/watch?v=2oKSIs6jTrE

Wird entfernt
Wird durch embed/ ersetzt
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 22.09.2011, 22:04, insgesamt einmal bearbeitet
Beitrag22.09.2011 um 21:06 (UTC)    
Titel:

Danke! Very Happy
Beitrag22.09.2011 um 21:25 (UTC)    
Titel:

Erstmal: Sorry für Doppelpost-bin aber grad in meinem anderen Account eingeloggt und da dieser Thread sowieso ganz oben ist, hoffe ich, dass das nicht so schlimm ist.

Jetzt aber zu meinem Problem:

1. Wenn ich das Video über die Leiste rechts wechsel, sagt er: "Es ist ein fehler aufgetreten, versuche es später erneut." Passiert das bei dir (oder den anderen Usern) auch?

2. Wie kriege ich es hin, dass sich beim Videowechsel auch der Text unterhalb (in einer neuen Div) ändert?


3. (Wenn ich schon dabei bin:) Momentan ist es noch so, dass die Proportionen sich beim Vergrößern/Verkleinern des Browserfensters total verschieben-was muss ich in meinem Code ändern, um das zu beheben?

Text über dem Design:
Zitat:
<div id="extraDiv2"> <span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255); ">
<p id="watch-uploader-info" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 0.9166em; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(102, 102, 102); background-position: initial initial; background-repeat: initial initial; ">Hochgeladen von <a class="author" rel="author" href="http://www.youtube.com/user/Teamcharger" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 11px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(66, 114, 219); text-decoration: none; background-position: initial initial; background-repeat: initial initial; ">Teamcharger</a> am <span id="eow-date" class="watch-video-date" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 11px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">04.08.2011</span></p>
<div id="watch-description-text" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 1.09em; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; line-height: 1.4; background-position: initial initial; background-repeat: initial initial; ">
<p id="eow-description" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 13px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Ein selbst erstellter Trailer für das Spiel Audiosurf anlässlich des <br>
PCGH-Video-Wettbewerbs.<br> Es ist kein Meisterstück, aber es war auch nur ein Test.</p>

</div>
</span> <br /></div>

<div id="videobox"> <iframe id="videoelement" width="430" height="260" src="http://www.youtube.com/embed/2oKSIs6jTrE" frameborder="0" allowfullscreen></iframe></div>


<div id="extraDiv4"><script type="text/javascript">
function changeVideo(url)
{
document.getElementById('videoelement').src = url;
}
</script><a href="#" onclick="changeVideo('http://www.youtube.com/embed/=viefNFJRPXY'); return false;"><img width="180" height="120" alt="" src="http://i3.ytimg.com/vi/viefNFJRPXY/default.jpg" /></a>
<br>
<a href="#" onclick="changeVideo('http://www.youtube.com/embed/=2oKSIs6jTrE'); return false;"><img width="180" height="120" alt="" src="http://i3.ytimg.com/vi/2oKSIs6jTrE/default.jpg" />
</a>



<div id="extraDiv5"><span style="font-size: x-large; "><span style="color: rgb(255, 255, 255); ">Sprachen/ Languages:<br />
</span><span style="color: rgb(192, 192, 192); ">-Deutsch<br />
</span><span style="color: rgb(255, 255, 255); "><a href="http://rusher-en.de.tl/">-English</a></span></span>
</div>




<div id="ytlink"><a href="http://www.youtube.com/user/GYGRusher"><img width="200" height="80" alt="" src="http://home.nauthic-records.de/youtube-logo.jpg" /></a></div>


Grün: Ich weiß, ist etwas übertrieben, aber ich hab den Code von der YouTube-Beschreibung nur kurz reinkopiert

CSS:
Zitat:
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}

#sidebar_container{display:none;}
#counter{display:none;}

body {
background-color: #FFFFFF;
background-image: url(http://www.bilderhoster24.de/images/1zq0ebrc1xxibay38tqv.jpg); }



#content {
position: absolute;
left: 50%;
top: 390px;
margin-left: -320px; width: 420px; }


#nav_container { position: absolute; left: 50%; top: -65px; margin-left: -578px; width: 900px; height: 17px; text-align: left; border-top: 0px solid #ffffff; background-image:url(); } li.nav_element { display: inline-block; text-align: center; height:9px; padding: 13px; width: 94px; background-image:url(http://img.webme.com/pic/g/gygrusher/navinavinewgaming.png); border-left: 1px solid #3f3f3f; border-right: 1px solid #3f3f3f; } li.nav_element a { font-size:15px; color: #e5fcff; font-family: Tahoma; text-decoration: none; }
li.nav_element:hover { height :9px; background-image:url(http://img.webme.com/pic/g/gygrusher/navinavinewgaminghover.png); }
li.nav_element:hover a { font-size:15px; color: #fff; font-family: Tahoma; text-decoration: none; }



#extraDiv2 {position: absolute;
left: 50%;
top: 565px;
margin-left: -310px; width: 960px;
height: 100px; color: #FFFFFF;
font-size: 14px;
font-family: arial;. }

#videobox {position: absolute;
left: 50%;
top: 275px;
margin-left: -313px; }

#extraDiv4 {position: absolute;
left: 50%;
top: 280px;
margin-left: 133px; }



#extraDiv5 {position: absolute;
left: -380%;
top: -60px;
margin-left: 3px; }


#ytlink {position: absolute;
left: -242%;
top: 420px;
margin-left: 3px; }


Danke& MFG Jamie


Zuletzt bearbeitet von gygrusher am 22.09.2011, 22:30, insgesamt 2-mal bearbeitet
Beitrag22.09.2011 um 22:25 (UTC)    
Titel:

gygrusher hat Folgendes geschrieben:
1. Wenn ich das Video über die Leiste rechts wechsel, sagt er: "Es ist ein fehler aufgetreten, versuche es später erneut." Passiert das bei dir (oder den anderen Usern) auch?

Kommt bei mir auch. Der Grund dafür ist rot. Das musst du nämlich auch noch entfernen.
Zitat:

...
<a href="#" onclick="changeVideo('http://www.youtube.com/embed/=2oKSIs6jTrE'); return false;"><img width="180" height="120" alt="" src="http://i3.ytimg.com/vi/2oKSIs6jTrE/default.jpg" />
</a>
<a href="#" onclick="changeVideo('http://www.youtube.com/embed/=viefNFJRPXY'); return false;"><img width="180" height="120" alt="" src="http://i3.ytimg.com/vi/viefNFJRPXY/default.jpg" /></a>



gygrusher hat Folgendes geschrieben:
2. Wie kriege ich es hin, dass sich beim Videowechsel auch der Text unterhalb (in einer neuen Div) ändert?

In dem du das Javascript abänderst:


Zitat:
<script type="text/javascript">
function changeVideo(url, text)
{
document.getElementById('videoelement').src = url;
document.getElementById('videotext').firstChild.nodeValue = text;
}
</script>

Du musst dem Element, in welchem der Text stehen soll, die id videotext geben. Der Funktionsaufruf, sieht dann so aus:
Zitat:
<a href="#" onclick="changeVideo('http://www.youtube.com/embed/=viefNFJRPXY', 'Hier der Text von Video 1'); return false;"><img width="180" height="120" alt="" src="http://i3.ytimg.com/vi/viefNFJRPXY/default.jpg" /></a>



gygrusher hat Folgendes geschrieben:
3. (Wenn ich schon dabei bin:) Momentan ist es noch so, dass die Proportionen sich beim Vergrößern/Verkleinern des Browserfensters total verschieben-was muss ich in meinem Code ändern, um das zu beheben?

Das Design richtig coden. Dafür hast du doch schon einen ich suche Thread. Wink
http://www.homepage-baukasten.de/forum/viewtopic.php?t=133333
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag23.09.2011 um 04:43 (UTC)    
Titel:

@ 1. Oh, hab ich wohl übersehen. Wink
@2. Danke!
@3 Ich weiß. Aber ich wie konkret? Hab hier nochmal reingeschrieben, da die 'Ich suche'-Threads leider nicht ganz so oft gelesen werden und ich hoffe, du wüßtet eine Lösung.

Danke& MFG Jamie
Beitrag23.09.2011 um 15:15 (UTC)    
Titel:

Hallo,

gygrusher hat Folgendes geschrieben:

@3 Ich weiß. Aber ich wie konkret? Hab hier nochmal reingeschrieben, da die 'Ich suche'-Threads leider nicht ganz so oft gelesen werden und ich hoffe, du wüßtet eine Lösung.

Das "wie" hat dir pexxi auch schon gesagt. Du musst das Design richtig coden. Momentan positionierst du jedes Element nur absolute, das wird so nicht klappen. Durch das absolute orientiert sich das Element am nächst höheren Elternelement, welches nicht die Normaleinstellung static hat. Da keines deiner Elemente überhaupt ein Elternelement hat (ausser body und html natürlich), orientieren sie sich am Viewport und der ist bei jedem nunmal anderst.

Warte erstmal ab, ob sich in deinem Ich suche Thread jemand meldet. Falls nicht können wir immer noch weiterschauen.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 23.09.2011, 16:43, insgesamt 2-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de