Wyrównanie playera pokazanego po kliknięciu w button


(Czudik47) #1

Witam wszystkich. Mam dodany na stronie skrypt który po kliknięciu w przycisk pokazuje okienko z playerem w iframe.

Ustawiłem wygląd przyciska w css (Jest wyśrodkowany) ale po kliknięciu player nie jest już wyśrodkowany tylko lekko przesunięty.

 

Skrypt:

<center> 
<div class="video" id="video" onclick="wlaczVideo()"></div>
<script>
  var video = document.getElementById('video');
  
    function wlaczVideo(){
    
      video.innerHTML='<iframe width="640" height="360" src="{full-story}"></iframe>';
      
    }
</script>

<br />
</center>

Kod CSS:

.video{
background-image: url(../images/video.png);
height: 154px;
width: 375px;
display: inline-block;
position: relative;
cursor: pointer;
}

Pomoże ktoś zrobić tak aby player pokazywał się wyśrodkowany (tak jak przycisk)


(fiesta) #2

czudik proszę konkretnie zatytułować wątek (użyj  pełnego edytora).

 

Zignorowanie prośby będzie skutkować usunięciem topica z forum.


(jacko1998) #3
  1. Usuń ten znacznik - center

  2. Do .video dodaj margin: auto;


(Czudik47) #4

Zrobiłem tak jak napisałeś ale cały przycisk poszedł w lewo (połowy przycisku wgl nie widać).

Dodam jeszcze że przycisk ten jest w rozwijanej belce (Rozwija się po kliknięciu) i po jej rozwinięciu strona jest tak jak by za szeroka i można przewijać może to przez to. Kod css tej belki :

#bgfilms{
	padding-top: 15px;
	display:none;
	background-image: url("../images/bgfilms.png");
	height: 500px;
	margin:10px -50%;
	margin-bottom:20px;
	outline: 5px solid rgba(0, 0, 0, 0.5)
}

(jacko1998) #5

Tak myślałem. Obejmij div’a .video w jakiegoś innego div’a i do css dodaj

innyDiv {
    width: 100%;
    text-align: center;
}

(Czudik47) #6

Teraz wgl. wszystko się rozjechało i nie ma nawet buttona ale nie wiem czy dobrze robię, a więc tak to teraz wygląda (od strony kodu):

<div id="bgfilms"> 
<div class="player1" <div class="video" id="video" onclick="wlaczVideo()"></div> </div>
<script>
  var video = document.getElementById('video');
  
    function wlaczVideo(){
    
      video.innerHTML='<iframe width="640" height="360" src="{full-story}"></iframe>';
      
    }
</script>

<br />

CSS:

.player1 {
    width: 100%;
    text-align: center;
}
.video{
background-image: url(../images/video.png);
height: 154px;
width: 375px;
margin: auto;
display: inline-block;
position: relative;
cursor: pointer;
}


#bgfilms{
	padding-top: 15px;
	display:none;
	background-image: url("../images/bgfilms.png");
	height: 500px;
	margin:10px -50%;
	margin-bottom:20px;
	outline: 5px solid rgba(0, 0, 0, 0.5)
}

Dzięki za zainteresowanie tematem i szybką pomoc. 


(jacko1998) #7

Zamykasz gdzieś w ogóle ten div#bgfilms? Musisz gdzieś mieć błąd, ponieważ wszystko jest ok - http://goo.gl/ObTUiR


(Czudik47) #8

Jak możesz to spójrz na mój kod css:

http://jsbin.com/tawejivu/1/edit