GoogleChromeで表示されているWebページで奇妙な問題が発生しています。ie9 / safariで表示すると、埋め込まれたYouTubeビデオは正常に機能しますが、何らかの理由でChromeで表示されると、ページの読み込み時にブラックボックスが表示されます。奇妙なことは、ページが操作された瞬間です。ユーザーが下にスクロールすると、ビデオが正しく表示されます。何が悪いのかわかりません。
問題のページは次のとおりです。http://core.slnmedia.com/inspiration/
ページには、大きなタイルの右側で使用可能な幅を検出するスクリプトがあり、十分なスペースがある場合は、ポップアウトパネルが右側に表示されます。そうでない場合、パネルは左側に表示されます。「bevismarks」タイルが画面の右上隅に配置され、右側にわずかなスペースしか表示されないようにブラウザウィンドウのサイズを変更してからクリックすると、効果が表示されます。について話す。
タイルの位置を変更するjavascript関数は次のとおりです。
$('.large-tile').hover(function() {
$(this).find('.bw-photo').hide();
$(this).find('.inspiration-detail-wrapper').show();
$(this).css("z-index", "2");
var profile = $(this).find('.inspiration-detail');
if(profile.find('.content').text().trim().length == 0) {
showData($(this).attr('id').substring(1, $(this).attr("id").length));
}
// **Depending on how much window space is available, position the panel on**left/right
var available = $(window).innerWidth() - ($(this).offset().left + 300);
if(available >= 412) {
// If enough space then show panel on right
profile.css("left", "320px");
}
else {
// Otherwise attach left
profile.css("left", "-368px");
}
profile.show();
$('.scrollbar-wrapper').tinyscrollbar({ size: 252 });
},
function() {
$(this).find('.bw-photo').show();
$(this).find('.profile').hide();
$(this).css("z-index", "1");
$(this).find('.inspiration-detail-wrapper').hide();
});
奇妙なことに、行profile.css( "left"、 "320px"); トラブルの原因です。この行を含めない場合、ビデオは正しく表示されます。何らかの理由で、ポジショニングによりビデオが正しく表示されません。
私が問題を正しく説明したことを願っています-誰かが私がここでどこで間違っているのかについての考えを持っていますか?それは私を狂わせています!
ありがとう