এখানে সম্পূর্ণ সারাংশ দেখুন এবং এখানে লাইভ উদাহরণ দেখুন ।
#hero { width:100%;height:100%;background:url('{$img_ps_dir}cms/how-it-works/hero.jpg') no-repeat top center; }
.videoWrapper { position:relative;padding-bottom:56.25%;padding-top:25px;max-width:100%; }
<div id="hero">
<div class="container">
<div class="row-fluid">
<script src="https://www.youtube.com/iframe_api"></script>
<center>
<div class="videoWrapper">
<div id="player"></div>
</div>
</center>
<script>
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId:'xxxxxxxxxxx',playerVars: { controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' }
} );
resizeHeroVideo();
}
</script>
</div>
</div>
</div>
var player = null;
$( document ).ready(function() {
resizeHeroVideo();
} );
$(window).resize(function() {
resizeHeroVideo();
});
function resizeHeroVideo() {
var content = $('#hero');
var contentH = viewportSize.getHeight();
contentH -= 158;
content.css('height',contentH);
if(player != null) {
var iframe = $('.videoWrapper iframe');
var iframeH = contentH - 150;
if (isMobile) {
iframeH = 163;
}
iframe.css('height',iframeH);
var iframeW = iframeH/9 * 16;
iframe.css('width',iframeW);
}
}
ইউটিউব প্লেয়ার সম্পূর্ণরূপে লোড হওয়ার পরে (পৃষ্ঠায় লোড কাজ করে না) এবং ব্রাউজার উইন্ডোটিকে পুনরায় আকার দেওয়ার পরেই পুনরায় আকার হিরোভিডিও বলা হয়। এটি চলতে থাকলে, এটি iframe এর উচ্চতা এবং প্রস্থ গণনা করে এবং সঠিক দিক অনুপাত বজায় রাখার জন্য উপযুক্ত মান নির্ধারণ করে। উইন্ডোটি অনুভূমিকভাবে বা উলম্বভাবে পুনরায় আকার দেওয়া হোক কিনা এটি কাজ করে।