ビデオリンクのリストからクリックするたびに別のiframeをロードするクリック可能なボタンを作成したい

Question

どこから始めたらよいか分かりませんが、iframeを使用してボタンをクリックする必要がありますビデオリンクのリストからそのiframeに異なるビデオソース

Answer 1

iframeのURLを動的に変更するにはjavascriptが必要です。

JSFiddle：

例は千の言葉の価値があります。

jsfiddle.net/q1t6bz70/

説明：

これはあなたのiframe要素である場合：

<script> 
    // all available urls 
    var listOfUrls = ["url1", "url2", "url3"]; 
    // current url pointer 
    var pointer = 0; 

    function loadNewVideo() { 
    // get iframe element by id 
    var el = document.getElementById('ifr'); 
    // update pointer 
    if(pointer + 1 >= listOfUrls.length) { 
     pointer = 0; 
    } else { 
     pointer++; 
    } 
    // get new url 
    var newUrl = listOfUrls[pointer]; 
    // assign new url to src property 
    el.src = newUrl; 
    } 
</script> 

：

<iframe id="ifr"></iframe> 

あなたはjavascriptのコードでは、この定義された関数と、このフレームにURLを読み込むことができます

これで、ボタンの要素にこの関数をバインドできます。

<button onclick="loadNewVideo()"></button>