分配不同的鏈接到不同的圖像，並讓它在iframe容器上播放分配的（youtube）鏈接

所以我想要的是什麼，點擊「img1」後，它會在「video here」區域顯示「video1」，並在「text」區域顯示「text1」。分配不同的鏈接到不同的圖像，並讓它在iframe容器上播放分配的（youtube）鏈接

當點擊「img2」時，同樣的事情將在「文本」區域中將「text1」替換爲「text2」，並將「video1」替換爲「video here」區域中的「video2」。

有什麼建議嗎？目前還沒有代碼。只是想知道如果任何人有一個關於如何開始這個基本的想法，因爲我真的是新的JavaScript/jQuery的。

使用直接網址的YouTube視頻將是最好的。

在此先感謝。

2015-05-23 r4n4w4y

首先在圖像中，添加你要玩

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

現在創建一個div它顯示視頻的YouTube視頻的鏈接。

<div class="video"> 
<iframe id="video-div" width="500" height="500" src="" frameborder="0" allowfullscreen></iframe>

如果你想更改的文本，在IMG的點擊使用此代碼

document.getElementById("idname").innerHTML = 'your text';

希望這個作品

來源

2015-05-23 10:35:38 Thinker

它的確如此！非常感謝你！ – r4n4w4y

您好我希望我已經拿到了正確的想法，但我已經寫了一些代碼，希望能幫助你的問題。

這裏是我的結果：http://jsfiddle.net/6m92mkj8/2/

<a href="YOUTUBE_URL" title="VIDEO_TITLE"><img src="IMG_URL" alt=""></a>

我遵守了我的代碼清潔和排序的評論讓你明白。

我希望這會有所幫助。

來源

2015-05-23 11:17:56 TheOne

正是我在找的東西。謝謝！！這是一個巨大的幫助。我對JavaScript和jquery非常陌生，你的代碼非常乾淨，我幾乎立即就能理解它。非常感謝你！！有什麼可能，我也是一個巨大的「骯髒的頭」球迷。 Ahaha。 – r4n4w4y

好一個兄弟，很高興有幫助！ – TheOne

只是另一個快速問題。你從哪裏得到這個jQuery src文件？ – r4n4w4y

分配不同的鏈接到不同的圖像，並讓它在iframe容器上播放分配的（youtube）鏈接

回答

相關問題