CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Stoyan
Stoyan

Reputation: 104

Trigger an iframe youtube video through divs

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.com/9EcjYs8.jpg" data-video="http://www.youtube.com/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 !!!

Upvotes: 1

Views: 6069

Answers (2)

Rizwan Abbas
Rizwan Abbas

Reputation: 178

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.com/embed/QDmJxKHoVBo?autoplay=1"

your play button or link code

<a href="javascript:void(0)" onclick="jQuery('#video-frame').attr('src','//www.youtube.com/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.

Upvotes: 5

Tony Dinh
Tony Dinh

Reputation: 6726

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

Upvotes: 1

Related Questions