동영상 크기 조정 중 이미지 위치 유지

동영상을 통해 몇 개의 클릭 연결 요소가 있습니다. 브라우저의 종횡비를 변경할 때 요소의 위치가 어지럽게되어 어떤 클릭 동작도 발생하지 않습니다. 생기.동영상 크기 조정 중 이미지 위치 유지

%를 사용하고 있지만 어떤 이유로 여러 화면 크기에서 올바르게 배치하지 못합니다.

CSS :

#vidKlik1{ 
    width: 8%; 
    height: 30%; 
    top: 148%; 
    left: 16%; 
}

HTML :

<div class="popup"> 
     <video preload="auto" autoplay="autoplay" loop="loop" id="background2"> 
      <source src="background/background2.mp4" type="video/mp4"> </source> 
      <source src="background/background2.ogv" type="video/ogg"> </source> 
      <source src="background/background2.webm" type="video/webm"> </source> 
     </video> 

     <a href="#popup-box" class="popup-window"> 
      <img src="images/klik.jpg" id="vidKlik1"> 
     </a> 

     <a href="#popup-box" class="popup-window"> 
      <img src="images/klik.jpg" id="vidKlik2"> 
     </a> 

     <a href="#popup-box" class="popup-window"> 
      <img src="images/klik.jpg" id="vidKlik3"> 
     </a> 

     <a href="#popup-box" class="popup-window"> 
      <img src="images/klik.jpg" id="vidKlik4"> 
     </a>   
    </div>

및

나는 또한 상단 사용해야하는 몇 가지 이유 : 1백48% 내가 최고 가지고가는 경우에 때문에 : 100 %는 50 %에서 그것을 배치 페이지 상단, 2 개의 동영상 사이 오른쪽에

이 문제를 해결할 방법이 있습니까? 나는 이미 %를 사용하고 있지만 어떤 이유로 이미지를 올바르게 배치하지 못할 것입니다. VH 및 VW를 사용해 보았습니다. 이미지를 항상 표시 할 수있는 다른 작업을 모릅니다. 그것 뒤에있는 비디오가 비례 할 때 어떤 위치.

간단히 말해서 비디오에 클릭 할 수있는 상호 작용이 있도록하기 위해 비디오의 배율을 조정하려는 이미지가 있지만 너무 자주 멀리 떨어집니다.

출처

2014-11-19 Gerwin

독립적으로 배치 할 수있는 ID을 가지고 있습니다. 솔루션은 간단하며 비디오 및 링크는 컨테이너에 있어야합니다. 그런 다음 컨테이너는 비디오의 높이와 높이를 사용합니다. 링크는 동영상 상단에 위치하며 (위치 : 절대, Z- 색인 : 1000) 컨테이너에 따라 위치가 변경됩니다. 예제를 제공 할 수 있지만 작업 할 코드가 필요합니다. –

@ vyx.ca 더 많은 코드가 포함되도록 질문을 편집했습니다. 그러나 내가 제안한 것을 첫 번째 시도로 시도해 보았지만 원하는대로 작동하지 않았을 수 있습니다. – Gerwin

는 here's a working fiddle

CSS, 내 의견을

.popup { 
    position:relative; 
    width:75%; 
} 

.popup video { width:100%;} 

.popup a { position:absolute; z-index:1000;} 

#vidKlik1 { top:5%; left:5%; }

HTML

<div class="popup"> 
    <video preload="auto" autoplay="autoplay" loop="loop" id="background2"> 
     <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source> 
     <source src="http://vjs.zencdn.net/v/oceans.webm"></source> 
    </video> 

    <a href="#popup-box" class="popup-window" id="vidKlik1"> 
     <img src="http://placehold.it/50x50" /> 
    </a> 
</div>

중요한 부분

popup 요구를 따르십시오
<a> 필요 그래서 당신은 당신이 비디오를 몇 가지 관련 코드를 게시하시기 바랍니다 수 다른

출처

2014-11-19 13:56:10

코드 sortof를 사용하면 jQuery 코드로 내 이미지를 볼 수 없도록 웹 사이트가 중단됩니다. – Gerwin

@Gerwin jQuery에서 ID를 사용하고 있기 때문에 표시되지 않습니다. 그렇다면 이미지에 ID를 유지하고 링크에서 다른 ID를 사용하면 문제가되지 않습니다. 이와 같이 http://jsfiddle.net/masu1mko/4/ –

다음 코드를 사용하여 보이지 않게됩니다. .popup { 직위 : 상대적; 너비 : 100 %; } .popup video {width : 100 %;} .popup {{위치 : 절대; z- 인덱스 : 1000;} .popup을 #test로 변경하고 문제를 해결했습니다. – Gerwin

브라우저가 화면 해상도 나 방향이 바뀔 때 동작 방식이 일치하지 않을 수 있습니다. 여러 브라우저에서 일관된 동작을 유지하려면 jQuery (태그에 나열 했으므로)를 사용하여 resize 이벤트를 처리하고 새 창 크기 및/또는 비디오 위치를 기반으로 팝업 위치를 다시 계산해야합니다.

출처

2014-11-19 13:30:10 Blake

화면의 종횡비가 비디오와 정확히 동일하지 않기 때문에 이것이 작동하지 않는다고 생각합니다. 따라서 비율이 반드시 동일하지는 않습니다. 창 크기를 조정할 때 동영상의 어느면에도 검은 색 막대가 있습니까? 그 검은 영역은 당신의 백분율을 엉망으로 만들 것입니다.가 될

출처

2014-11-19 13:34:46

동영상 크기 조정 중 이미지 위치 유지

답변

관련 문제