반응 형 Youtube 비디오 - 붕괴

나는이 작업을 훌륭하게 수행했지만 클릭하면 비디오가 붕괴되었습니다.반응 형 Youtube 비디오 - 붕괴

내가 얻으려고하는 속임수는 페이지로드시 대역폭을 절약하기 위해 축소판 이미지를 사용하는 것입니다. 미리보기 이미지와 동영상이로드됩니다. 다시 말하지만,이 방법이 효과적 이었지만 텍스트의 일부를 세로로 정렬하려고 시도해 보니 텍스트가 붕괴되기 시작했습니다.

아이디어가 있으십니까?

관련 CSS는 :

.video { 
position: relative; 
background: #fafafa; 
margin-bottom: 0px; 
padding-top: 20px; 
z-index: 3; 
} 

.youtubeContainer { 

display: block; 
margin: 20px auto; 
width: 100%; 
max-width: 600px; 
} 

.youtube { 
background-position: center; 
background-repeat: no-repeat; 
display: block; 
padding-bottom: 56.25%; 
overflow: hidden; 
position: relative; 
width: 100%; 
height: 100%; 
cursor: hand; 
cursor: pointer; 
transition: all 200ms ease-out; 
} 



.youtube .play { 
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAERklEQVR4nOWbTWhcVRTHb1IJVoxGtNCNdal2JYJReC6GWuO83PM/59yUS3FRFARdFlwYP1CfiojQWt36sRCUurRIdVFXIn41lAoVdRGrG1M01YpKrWjiYmaSl8ybZJL3cd+YA//NLObd3++eO8x79z5jSq5Gw+8kov0AP8vMR5l1BtBZQM4B8ks75wCdZdYZZj5qLZ4hov2Nht9Z9vhKKSIaB/gI4M4w62KeAO6Mte4lYOq20FxrlqqOibhHmeWbvNC9ZfDX1mLae391aN6limO/gwgvAPJbWeAZuSDingdwXTBw7/0IsyaA/Fkh+KqOkD+YNfHej1QKD+y7iVlOhgLvFqFfNJvNGyuBJ+KDAF8MDd0tgS8y64OlgSdJMsysL4cG7SOHkyQZLhTee7+d2R2rAVy/S+Jd7/32ouBHAP4gNNRGQyTHc/84NhqNywZp5rvjjnnvt21aABFeCQ+RLwAf2hQ8s7sv9OCLk6AHNgQvIrvbfzKCD76g/O6cu7lf/iER/aQGgy448pExZmhdegAPhR9sObFWH1gT3lp7DaA/5bkIgJhZPgsNmz02novj+KqeApj1ubwXWe4kdyeznAgNvTpE/HQmvKqOMeuFogTUVQSRno+iaLRLAJF7uIgL9O4ubgL8aWgB7S44mNX+35YpICUiAvS9sBLkq1WzT+NFffl6AuoiApi6NT37h6sWkBIRZGkQ8YtLgyji6e1mBYTqCEBPG2Naz+0BWQgtoGoRgCzEsd9hAN1X5BfnFZASUfrSAFQNsyZ1FJASUVpHiLinDJG8U2cBZYogkrcNs5waBAGdstbeU9zdqpw0gPwwSAI6VUxHyFlDpOcHUUBBIuYNs14aZAE5RVwyzPr3/0EAEY0TyfGNjBWQvwZ +CTSbehfAH29mrID8bET0+0EUkAd8WYDOmqJ3ecsG30yr9wqRfm6Y+a1BEFDEjHfHvWmY9ck6CygHvBVr8Xhtb4ZE5HZA3y8DvBNA1TjnrmXWf+sioMwZX5V/VHXMGGMMoKdDCxCRvRWBdzKzdHEO+EisilbPyopHYqp6S9UCAsz4iojI7hUDAtyXVQgIDd6KnOoaWNkbI6FaPSuZGyMArsi7MZoloB4zviI/Nhr3X95jltwTRQmoIfgisy5ai+me67OI7fE4nrqjrqfK1t0eby0FPRB6oGVlchL3rgnfrq19RKbVBdhV9IOSwJmfmJi4vi/4ThERitwyCxVAFqydshuCX5awhQ9KtmuIWd8IDZED/nXT77rvVVv6sHRKwjYi91poqP7Dr+Y6JJ1VSZIMA3wkPNy6bX+o8Bcm0sXMdwM8Fxo0A3xORPaWBp6uPXsmbxCRD0NDL0dOANhVCXy6iAjMcjbcrMt3RITKwdMVRdFo+y5yvkL4eWZ+zHt/ZVD4dEVRNGotpst+dZZZH8k86lqn2pIvT/eqrNfn2xuyqYPZ8mv7s8pfn/8Pybm4TIjanscAAAAASUVORK5CYII=") no-repeat center center; 
background-size: 64px 64px; 
position: absolute; 
height: 100%; 
width: 100%; 
opacity: .8; 
filter: alpha(opacity=80); 
transition: all 0.2s ease-out; 
} 

.youtube .play:hover { 
opacity: 1; 
filter: alpha(opacity=100); 
}

출처

2016-08-05 mmorris1

는 사실은 우리의 사이트에 대한 약간의 스크립트를 썼다 :

HTML :

$(document).ready(function() { 
     videoDisplayer('VIDEOID', '#video1', '#video1link'); 
     videoDisplayer('VIDEOID', '#video2', '#video2link'); 
    });

: 즉시 빌드 할

<h2> 
         Videos 
        </h2> 
        <a href="" class="various fancybox.iframe" id="video1link"><div class="col-lg-4" id="video1"></div></a> 
        <a href="" class="various fancybox.iframe" id="video2link"><div class="col-lg-4" id="video2"></div></a>

자바 스크립트

그리고 videoDisplayer 기능 :

function videoDisplayer(id, container, videolink) { 
     $.getJSON("https://www.googleapis.com/youtube/v3/videos", { 
      key: "YOUR KEY GOES HERE", 
      part: "snippet,statistics", 
      id: id, 
     }, function (data) { 
      $("<img>", { 
       src: data.items[0].snippet.thumbnails.medium.url, 
      }).appendTo(container); 
      $("<p></p>").text(data.items[0].snippet.title).appendTo(container); 
      var baseURL = 'https://youtube.com/v/'; 
      var videoURL = baseURL + id; 
      $(videolink).prop('href', videoURL); 
     }) 
    };

출처

2016-08-05 22:08:18 JPeG

반응 형 Youtube 비디오 - 붕괴

답변

관련 문제