小编Sto*_*kov的帖子

通过div触发iframe youtube视频

我不知道下面的html代码中的那些按钮如何触发我的js文件中的iframe(在视频中)(和/或通过播放div)

HTML代码:

    <div style="text-align:center"> 
  <button onclick="playPause(); return false;">Play/Pause</button> 
  <button onclick="makeBig(); return false;">Enlarge</button>
  <button onclick="makeSmall(); return false;">Shrink</button>
  <button onclick="makeNormal(); return false;">Default</button></div>

<div class="video">
    <div class="play"><i class="icon-play"> ? </i></div>
  <img src="http://i.imgur.com/9EcjYs8.jpg" data-video="http://www.youtube.com/embed/OgAr66JbvtU?autoplay=1"/>
</div>
Run Code Online (Sandbox Code Playgroud)

JS代码:

$(document).ready(function (){

$('.play').click(function () {
    video = '<iframe width="600" height="375" frameborder="0" src="' + $('img').attr('data-video') + '"></iframe>';
    $('.video').replaceWith(video);
});
});

  var myVideo  = $('video');
function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 
function makeBig()
{ 
myVideo.height=487.5;
myVideo.width=780;
} 

function makeSmall()
{ 
myVideo.height=262.5;
myVideo.width=420;
} 

function makeNormal()
{ 
myVideo.height=375; …
Run Code Online (Sandbox Code Playgroud)

html javascript css iframe jquery

1
推荐指数
1
解决办法
5590
查看次数

标签 统计

css ×1

html ×1

iframe ×1

javascript ×1

jquery ×1