[CSS][HTML]Border w środku odtwarzacza video Opcje

[Generic]

Witam. Czy mógłby mi ktoś wytłumaczyć jak osiągnąć taki efekt że przezroczysta ramka znajduje się w środku odtwarzacza, tak jak jest to pokazane na obrazku poniżej? Zazwyczaj ramki są dookoła filmu. Czy jest to do zrobienia w samym html/css? Z góry dziękuję i pozdrawiam.

[kamil_lk]

http://jsfiddle.net/o4zmf84s/

[Generic]

@kamil_lk

przy znaczniku <video> ramka nie jest przezroczysta przez co nie widać rozmazanego video przy krawędziach.

Ten post edytował Generic 2.03.2015, 18:16:49

[trueblue]

http://jsfiddle.net/o4zmf84s/1/

[Generic]

http://jsfiddle.net/o4zmf84s/1/

Zrobiłeś że tekst znajduje się na tej ramce przez co video bedzie zasłaniać ramke.

[trueblue]

Ramka jest półprzezroczysta, to ona przysłania tekst, a nie tekst ją.

[Generic]

Ramka jest półprzezroczysta, to ona przysłania tekst, a nie tekst ją.

[HTML] pobierz, plaintext 
<video controls><source src="home_video.mp4" type="video/mp4"></video>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
video
{
    width: 412px;
    height: 234px;
    box-sizing: border-box;
    border: 3px solid rgba(0, 0, 0, 0.1); 
}
[PHP] pobierz, plaintext 

Coś jest nie tak. Ramka wygląda jakby była po zewnętrznej stronie.

[trueblue]

W moim przykładzie było zupełnie coś innego.

[Generic]

W moim przykładzie było zupełnie coś innego.

Wiem, ty ustawiłeś div jednak chodziło mi jak zrobić coś takiego w odtwarzaczu video.

[trueblue]

Przepisać style css z przykładu.

[Generic]

Ramka jest półprzezroczysta, to ona przysłania tekst, a nie tekst ją.

Przepisać style css z przykładu.

[HTML] pobierz, plaintext 
<video controls class="border"><source src="home_video.mp4" type="video/mp4"></video>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
.border
{
         width: 412px;
	height: 234px;
	box-shadow: inset 0 0 0 4px rgba(255,0,0,0.5);
}
[PHP] pobierz, plaintext 

Ramka jest, jednak jest ona pod odtwarzaczem zamiast na nim.

[trueblue]

Coś takiego powinno zadziałać:

[HTML] pobierz, plaintext 
<style type="text/css">
.border{
 position:relative;
}
.border:after
{
 position:absolute;
 left:0;
 top:0;
 width:200px;
 height:200px;
 box-shadow: inset 0 0 0 4px rgba(255,0,0,0.5);
 content:'';
}
</style>
 
<div class="border">
<video   class="border" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
</div>
[HTML] pobierz, plaintext 

Ten post edytował trueblue 2.03.2015, 20:54:11

[Generic]

@trueblue

Wygląda w porządku, ale coś blokuje przyciski odtwarzania przez co film się nie uruchamia.

[trueblue]

I niestety tu lipa, bo :after będzie mieć domyślnie większy z-index niż video i kontrolki.
Jest możliwe to po wprowadzeniu czterech oddzielnych elementów wewnątrz div.border, z których każdy będzie symulował jedną z czterech ramek.
Czyli w div.border trzeba wstawić 4 elementy o szerokości/wysokości równej szerokość ramki/szerokość/wysokość video z background color z opacity.