Javascript-форум - Вывод плеера через java script

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Вывод плеера через java script (https://javascript.ru/forum/misc/53600-vyvod-pleera-cherez-java-script.html)

Вывод плеера через java script

Ребят, вообщем тема такая, мне нужно на своем сайте через java script выводить два iframe плеера фиксированных размеров, при загрузке страницы пользователем, ему должен отображаться один плеер, но выше плеера нужно сделать две кнопки, что бы пользователь мог выбрать какой плеер воспроизводить, например: нажал на плеер Б, и вместо плеера А, появился плеер Б. Кто подскажет, как мне это осуществить?

Вот пример как сделано на сайте два плеера http://gidonlinekino.com/2015/01/zalozhnica-3/

http://learn.javascript.ru/play/LWz8f

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    
    <iframe id="player" height="249" scrolling="no" width="320"></iframe>
    
    <br>
    
    <button onclick="changePlayer('https://www.youtube.com/embed/vUmLfvHkGus')">Player 1</button>
    <button onclick="changePlayer('https://vk.com/video_ext.php?oid=11767786&id=169403336&hash=a1a5d2c281b53598&hd=2')">Player 2</button>

    <script type="text/javascript">
      var player = document.getElementById('player');
      
      function changePlayer(src) {
        player.src = src;
      };
      
      changePlayer('https://www.youtube.com/embed/vUmLfvHkGus');
    </script>

  </body>
</html>

Это можно упростить так:

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <iframe id="player" height="249" scrolling="no" width="320" src="https://www.youtube.com/embed/vUmLfvHkGus"></iframe>
    <br>
    <button onclick="document.getElementById('player').src='https://www.youtube.com/embed/vUmLfvHkGus'">Player 1</button>
    <button onclick="document.getElementById('player').src='https://vk.com/video_ext.php?oid=11767786&id=169403336&hash=a1a5d2c281b53598&hd=2'">Player 2</button>
  </body>
</html>

или так:

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <iframe id="player" height="249" scrolling="no" width="320" src="https://www.youtube.com/embed/vUmLfvHkGus"></iframe>
    <br>
    <button onclick="player.src='https://www.youtube.com/embed/vUmLfvHkGus'">Player 1</button>
    <button onclick="player.src='https://vk.com/video_ext.php?oid=11767786&id=169403336&hash=a1a5d2c281b53598&hd=2'">Player 2</button>
  </body>
</html>

Опан, и в чём упрощение? м?

Ребят я использую cms dle в fullstory я iframe вывожу через дополнительные поля, вот таким кодом [xfgiven_iframe]<iframe src="[xfvalue_iframe]" width="708" height="398" frameborder="0"></iframe>[/xfgiven_iframe]
тогда мне нужно указать вот так :
<button onclick="[xfvalue_iframe]" width="708" height="398" frameborder="0"></iframe>[/xfgiven_iframe]'">Player 1</button> или как:?

Цитата:

Сообщение от Опан

<br>

а где закрывается этот код?

А как сделать что бы кнопки были сверху? а не снизу

Цитата:

Сообщение от FloRes (Сообщение 356148)

Ребят я использую cms dle в fullstory я iframe вывожу через дополнительные поля

У меня когда-то был сайт DLE, дело в том, что там в шаблонах JS в роде бы не фунциклирует вообще.

Цитата:

Сообщение от FloRes (Сообщение 356148)

а где закрывается этот код <br>?

Этот тег не закрывается. Он переносит на новую строку.

Цитата:

Сообщение от FloRes (Сообщение 356148)

А как сделать что бы кнопки были сверху? а не снизу

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <button onclick="player.src='https://www.youtube.com/embed/vUmLfvHkGus'">Player 1</button>
    <button onclick="player.src='https://vk.com/video_ext.php?oid=11767786&id=169403336&hash=a1a5d2c281b53598&hd=2'">Player 2</button>
    <br>
    <iframe id="player" height="249" scrolling="no" width="320" src="https://www.youtube.com/embed/vUmLfvHkGus"></iframe>
  </body>
</html>

Подскажите, как убрать это серое окно в котором находится плеер, и изменить дизайн этих серых кнопок?