I have no idea how those buttons in the html code below could trigger the iframe (within video) in my js file (and/or through a play div)

HTML CODE:

    <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=".jpg" data-video=""/>
</div>

JS CODE:

$(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;
myVideo.width=600;
} 

And if you need the CSS :

body{
  background-image: linear-gradient(#99ccff, #fff6e4);
  margin: 0 auto;
  margin-top:100px;
  width:600px;
  height:375px;
}

html{
  min-height:100%;
}

.video {
    margin: 0 auto;
    position: relative;
    height: 375px;
    width: 600px;
    background: #73AF96;
}
.video img {
    opacity: 0.65;
    transition: 0.4s all;
}

.video div.play:hover + img {
  filter: blur(2px);
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
}

.play {
  z-index: 1;
}

.play {
    opacity:0.5;
    height: 100px;
    width: 140px;
    position: absolute;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    /*Centering*/
    margin: -60px 0 0 -60px;
    left: 50%;
    top: 50%;
    display: block;
    background: #FF9933;
    transition: background-color 1s ease;
    color: white;
}
.play:hover {
    opacity: 0.7;
    background: #FF6600;
}
.icon-play {
    text-align:center;
    line-height: 100px;
    font-size:2.5em;
}

.icon-play:before {
    cursor: pointer;
}

However, I am not able to fix the buttons through js and they seem not to work. Thank in advance for your help !!!

I have no idea how those buttons in the html code below could trigger the iframe (within video) in my js file (and/or through a play div)

HTML CODE:

    <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./9EcjYs8.jpg" data-video="http://www.youtube./embed/OgAr66JbvtU?autoplay=1"/>
</div>

JS CODE:

$(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;
myVideo.width=600;
} 

And if you need the CSS :

body{
  background-image: linear-gradient(#99ccff, #fff6e4);
  margin: 0 auto;
  margin-top:100px;
  width:600px;
  height:375px;
}

html{
  min-height:100%;
}

.video {
    margin: 0 auto;
    position: relative;
    height: 375px;
    width: 600px;
    background: #73AF96;
}
.video img {
    opacity: 0.65;
    transition: 0.4s all;
}

.video div.play:hover + img {
  filter: blur(2px);
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
}

.play {
  z-index: 1;
}

.play {
    opacity:0.5;
    height: 100px;
    width: 140px;
    position: absolute;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    /*Centering*/
    margin: -60px 0 0 -60px;
    left: 50%;
    top: 50%;
    display: block;
    background: #FF9933;
    transition: background-color 1s ease;
    color: white;
}
.play:hover {
    opacity: 0.7;
    background: #FF6600;
}
.icon-play {
    text-align:center;
    line-height: 100px;
    font-size:2.5em;
}

.icon-play:before {
    cursor: pointer;
}

However, I am not able to fix the buttons through js and they seem not to work. Thank in advance for your help !!!

• javascript
• jquery
• html
• css
• iframe

2 Answers 2

I know this is late reply but it can help someone else to achieve this just in two lines.

Just on click event replace the iframe src attribute with your video url with autoplay=1 "//www.youtube./embed/QDmJxKHoVBo?autoplay=1"

your play button or link code

<a href="javascript:void(0)" onclick="jQuery('#video-frame').attr('src','//www.youtube./embed/S-JtVTTMU2A?autoplay=1');jQuery('.video-container').show();"  >Play</a>

Keep the Iframe source attribute empty

<div class="video-container" style="display:none">
    <iframe id="video-frame" width="853" height="480" src=""  frameborder="0" allowfullscreen></iframe>
<br>
</div>

Let the magic work.

You should use Youtube Javascript API to do that. Here is a javascript full control demo: https://developers.google./youtube/youtube_player_demo