पूरी जिंदादिली यहां देखें और उदाहरण यहां देखें ।
#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);
}
}
resizeHeroVideo को केवल तब ही कहा जाता है जब Youtube प्लेयर पूरी तरह से लोड हो जाता है (पेज लोड नहीं होता है), और जब भी ब्राउज़र विंडो का आकार बदला जाता है। जब यह चलता है, तो यह आइफ्रेम की ऊंचाई और चौड़ाई की गणना करता है और सही पहलुओं के अनुपात को बनाए रखते हुए उपयुक्त मान प्रदान करता है। यह काम करता है कि खिड़की क्षैतिज या लंबवत आकार में बदल दी गई है या नहीं।