画像をクリックした後のポップアップのようにウェブページ上でビデオを再生

再生ボタンをクリックしたときにビデオを再生する必要があります。しかし、私は背景が薄れて同じページで再生するには、このビデオが必要です。ビデオはポップアップビデオのように表示する必要があります。画像をクリックしたときにポップアップとして表示されるようにするには、問題が発生しています。私は時計をクリックすると、thisのようなものにする必要があります。これをやり遂げるにはどうすればいいですか？画像をクリックした後のポップアップのようにウェブページ上でビデオを再生

<div class="col-md-12 f-play-video"> 
    <a href="https://youtu.be/7pvci1hwAx8"><img class="play-button" src="http://www.clipartbest.com/cliparts/bcy/Egx/bcyEgxxzi.png"></a> 
</div>

.f-play-video{ 
text-align: center; 
margin-top: 80px; 
} 

.play-button{ 
width:50px; 
}

https://jsfiddle.net/4dd4ze53/3/

出典

2016-10-13 Michelle Ashwini

には、フィドルのブートストラップが含まれます。ソリューションの迅速化に役立ちます。 – ilmk

私はすでにそれを追加しました。 –

ブートストラップを使用している場合、なぜビデオをモーダルに入れませんか？ –

は@ilmk、@ A.Lauと@coskikoz後、私は、ブートストラップモーダルを使用して作業ポップアップ得ることができました。これは私の作業コードです。

<div class="col-md-12 f-play-video" data-toggle="modal" data-target="#myModal"> 
    <img src="images/play-video.svg"> 
</div> 

<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 

      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Video</h4> 
      </div> 

      <div class="modal-body"> 
        <iframe width="100%" height="360" src="<iframe width="560" height="315" src="https://www.youtube.com/embed/7pvci1hwAx8?rel=0&amp;controls=0" "frameborder="0" allowfullscreen autoplay></iframe> 
      </div> 

      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

    </div> 
</div>

出典

2016-10-13 08:09:57

いい仕事です！いくつかのjavascriptコードを追加することもできます。 – coskukoz

@coskukoz申し訳ありませんが、私は非常にこれに新しいです。 javascriptを含める？ –

私の答えで私のコードをチェックしてください： ' ' – coskukoz

私はザ・モーダルボックスはあなたの問題を解決すると思います。 ビデオコードを箱に入れてください。

<head> 
<style> 

.modal { 
display: none; 
position: fixed; 
z-index: 1; 
padding-top: 100px; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgb(0,0,0); 
background-color: rgba(0,0,0,0.4); 
} 

.modal-content { 
background-color: #fefefe; 
margin: auto; 
padding: 20px; 
border: 1px solid #888; 
width: 80%; 
} 

.close { 
color: #aaaaaa; 
float: right; 
font-size: 28px; 
font-weight: bold; 
} 

.close:hover, 
.close:focus { 
color: #000; 
text-decoration: none; 
cursor: pointer; 
} 
</style> 
</head> 
<body> 

<button id="myBtn">Click here for video!</button> 

<div id="myModal" class="modal"> 

<div class="modal-content"> 
<span class="close">×</span> 
<p align="center">INSERT YOUR VIDEO HERE!</p> 
</div> 

</div> 

<script> 

var modal = document.getElementById('myModal'); 

var btn = document.getElementById("myBtn"); 

var span = document.getElementsByClassName("close")[0]; 

btn.onclick = function() { 
modal.style.display = "block"; 
} 

span.onclick = function() { 
modal.style.display = "none"; 
} 

window.onclick = function(event) { 
if (event.target == modal) { 
    modal.style.display = "none"; 
} 
} 
</script>

出典

2016-10-13 06:15:19 coskukoz

あなたが持っている例は、文書の最後にモデルと体の上部にオーバーレイ要素を作成するためのonclick関数を使用して、モデルにテキストを追加して置き換えますビデオリンク。

onclick="return playYoutube("Achieve more everyday in your work and your daily life", this.href);"

出典

2016-10-13 06:29:23 NoName0007

画像をクリックした後のポップアップのようにウェブページ上でビデオを再生

答えて

関連する問題