javascript - Make a video play when i click on an image inside iframe -
i take video photo youtube iframe. can see when click on html button photo load try make photo change video in iframe after click on picture. all..!
this html:
<!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="index.css"/> </head> <body> <header></header> <nav> <a target="page" id="img" onclick="html()" href="http://i1.ytimg.com/vi/bwpmsssvdpk/hqdefault.jpg"> <button>html</button> </a> </nav> <iframe name="page" src="" frameborder="1"></iframe> <footer></footer> </body> </html>
this javascript:
function html(){ var iframes = document.getelementbyid('iframes'); iframes.innerhtml ='https://www.youtube.com/embed/bwpmsssvdpk'; }
is looking for?
<!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="index.css"/> <style> .hidden { display: none; } .shown { display: ""; } </style> <script> function html(img) { var iframe = document.getelementbyid("frame"); img.setattribute("class", "hidden"); iframe.setattribute("class", "shown"); } </script> </head> <body> <header></header> <nav> <button>html</button> </nav> <img src="http://i1.ytimg.com/vi/bwpmsssvdpk/hqdefault.jpg" frameborder="1" class="shown" id="image" onclick="html(this);"/> <iframe id="frame" name="page" src="https://www.youtube.com/embed/bwpmsssvdpk" frameborder="1" class="hidden"></iframe> <footer></footer> </body> </html>
you might want fiddle height , width attributes of elements, how achieve result you're looking for.
Comments
Post a Comment