CSS 또는 HTML을 사용한 동적 비디오/이미지 스타일링

YouTube 비디오 클립을 HTML 페이지에 포함 할 수 있습니다. 나는 모호 건너하지만 클립을 클릭 할 때 페이지의 중심에 와서 배경을 흐리게 할 수 있도록 제가 실제로 원하는 것은 경우CSS 또는 HTML을 사용한 동적 비디오/이미지 스타일링

<div class="videob">  
     <iframe title="YouTube video player" 
     class="youtube-player" type="text/html" 
     width="610" height="390" src= 
     "http://www.youtube.com/embed/grh03-NjHzc" 
     frameborder="0" allowFullScreen> 
     </iframe> 
</div>

나는 죄송합니다. Google 크롬에서 "조명 끄기"앱이하는 것과 유사합니다. 나는 이미지에 대해서도 똑같이하고 싶다.

출처

2011-08-30 user869494

무엇의 중심? 상위 페이지? iframe? –

이것은 CSS만으로는 불가능합니다. 숨겨진 background-bg div를 만들어야합니다.이 div는 고정 된 위치에 있고 페이지 전체를 덮고 검정 배경과 불투명도를 부여합니다. 그런 다음 비디오를 클릭하면 javascript로 비디오 클립과 div를 표시 할 수 있습니다. 또는 자바 스크립트로 백그라운드 div를 만들 수 있습니다. videob div도 고정 (또는 절대) 위치를 가져야하며 왼쪽에 포기해야합니다 (50 %). margin-left : - (요소 너비/2)를 사용하여 화면 중앙에 배치합니다. 다행히 그것이 당신을 시작할 수 있기를 바랍니다. – riku

[Fancybox] (http://fancybox.net/blog#tip4)와 같은 라이트 박스 스크립트 (웹 사이트에 YouTube 예제가 있음)를 사용하여 해당 라이트 박스 안에 비디오를 표시 할 수 있습니다. – feeela

나는 Fancybox가 IE를 정지시키는 경향이 있으므로 Shadowbox를 선호합니다.

<a href="http://www.youtube.com/embed/grh03-NjHzc" rel="shadowbox;width=610;height=390;" title="Nelson Mandela's inaugural address">

건배 :

여기

<link rel="stylesheet" type="text/css" href="includes/shadowbox.css"> 
<script type="text/javascript" src="includes/shadowbox.js"></script> 
<script type="text/javascript"> 
Shadowbox.init(); 
</script>

귀하의 동영상입니다 : 당신은 여기

는 머리를 ... 그래서 설정 쉐도우 후 여기

http://www.shadowbox-js.com/

그것을 확인하실 수 있습니다 !

출처

2011-09-04 21:41:56 abracassabra

CSS 또는 HTML을 사용한 동적 비디오/이미지 스타일링

답변

관련 문제