i have div implemented youtube iframe api, basicly want put background color above before video start, when video start want background color dissapear, 1 more thing want mantain text have above video, @ moment have video , text above video, how can implement background?
html
<section class="content_section bg_fixed white_section bg2"> <div class="embed-responsive embed-responsive-16by9"> <div class="container" style="position: relative;"> <div> <p> </p> <p> </p> <p> </p> <div class="title-wrapper main_title text-center centered upper"> <h2><span class="line"></span>simple solutions complex problems</h2> </div> <div class="description4 centered"> <p dir="ltr"><b id="docs-internal-guid-7b963bcb-e991-08ff-b846-612f8d57baee">the world complex place. </b><br><b>our solutions designed allow organisations , use information without adding layers , layers of heavy software.<br> usability , simple deployment key words.</b></p> <p dir="ltr"> </p> <p dir="ltr"> </p> <p dir="ltr"> </p> </div> </div> </div> <div id="player" width="100%" height="100%" style="z-index:-1"> </div> </div> </section> youtube api
<script> // 2. code loads iframe player api code asynchronously. var tag = document.createelement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstscripttag = document.getelementsbytagname('script')[0]; firstscripttag.parentnode.insertbefore(tag, firstscripttag); // 3. function creates <iframe> (and youtube player) // after api code downloads. var player; function onyoutubeiframeapiready() { player = new yt.player('player', { height: '360', width: '640', videoid: 'kn-1d5z3-cs', autoplay: true, startat: 10, loop: 1, playervars: { 'autoplay': 1, 'controls': 0, 'rel': 0, 'modestbranding': 1, 'showinfo': 0 }, events: { 'onready': onplayerready, 'onstatechange': onplayerstatechange } }); } // 4. api call function when video player ready. function onplayerready(event) { player.mute(); event.target.playvideo(); } // 5. api calls function when player's state changes. // function indicates when playing video (state=1), // player should play 6 seconds , stop. var done = false; function onplayerstatechange(e) { if (e.data === yt.playerstate.ended) { player.playvideo(); } } function stopvideo() { player.stopvideo(); } </script>
how can implement background color?
try using style="background: #00ff00". when added iframe, background color green, video loaded.
here's fiddle: http://fiddle.jshell.net/gt4otyfk/22/
Comments
Post a Comment