jquery - How did youtube create a fluid video player? -
if see on on of youtube's videos, https://www.youtube.com/watch?v=s8yzne7rkim, re-size dimensions of page, video player change according aspect ratio rather re-sizing it. useful because doesn't show black bars. attempt @ not successful.
<style type="text/css"> #actualvid { width: 100% !important; height: auto !important; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <div id="actualvid"> <div id="ytapiplayer" style="width: 620px; height: 480px;" > need flash player 8+ , javascript enabled view video. </div> <script type="text/javascript"> var params = { allowscriptaccess: "always", allowfullscreen: "true" }; var atts = { id: "myytplayer" }; swfobject.embedswf("http://www.youtube.com/e/s8yzne7rkim?enablejsapi=1&playerapiid=ytplayer?rel=0&autoplay=1&rel=0","ytapiplayer", "640", "390", "8", null, null, params, atts); function onyoutubeplayerready(playerid) { ytplayer = document.getelementbyid("myytplayer"); } function play(el, videoid) { if (ytplayer) { ytplayer.loadvideobyid(videoid); } // reset background-color divs has class video $('.video').css('background-color', '#222222'); $(el).css('background-color', '#3a3a3a'); } </script> </div>
one way attempted throw video in div , go way: http://css-tricks.com/netmag/fluidwidthvideo/article-fluidwidthvideo.php however, not able work. can help? way youtube did seems if re-sizes accordingly window size.
here solution css:
.embed-container { position: relative; padding-bottom: 56.25%; /* 16x9 */ height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
<div class='embed-container'> <iframe src='http://www.youtube.com/embed/c0dpdy98e4c' frameborder='0' allowfullscreen></iframe> </div>
Comments
Post a Comment