2014-01-17 2 views
8

Могу ли я заменить оригинальный значок воспроизведения YouTube на встроенные видеоролики youtube? Я бы поставил свою собственную иконку выше iframe youtube для достижения этого. Я знаю, что facebook не позволяет стилизовать подобную кнопку, поэтому я спрашиваю о настройке проигрывателя youtube.Можно ли изменить значок воспроизведения встроенных видеороликов YouTube?

ответ

14

Я не уверен, что вы можете настроить YouTube, встроенный без использования JavaScript JavaScript api.

Вот как это сделать с API:

Javascript

//youtube script 
var tag = document.createElement('script'); 
tag.src = "//www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

var player; 

onYouTubeIframeAPIReady = function() { 
    player = new YT.Player('player', { 
     height: '244', 
     width: '434', 
     videoId: 'AkyQgpqRyBY', // youtube video id 
     playerVars: { 
      'autoplay': 0, 
      'rel': 0, 
      'showinfo': 0 
     }, 
     events: { 
      'onStateChange': onPlayerStateChange 
     } 
    }); 
} 

onPlayerStateChange = function (event) { 
    if (event.data == YT.PlayerState.ENDED) { 
     $('.start-video').fadeIn('normal'); 
    } 
} 

$(document).on('click', '.start-video', function() { 
    $(this).fadeOut('normal'); 
    player.playVideo(); 
}); 

HTML

<div id="player"></div> 
<button class="start-video">Start Video</button> 

CSS

button { 
    position: absolute; 
    top: 106px; 
    padding: 12px; 
    left: 174px; 
} 

Я создал a Jsfiddle с рабочим примером.

+8

Это не работает, вы можете видеть кнопку youtube под своей пользовательской кнопкой в ​​скрипке. – roNn23

+0

Не для меня @ roNn23, в Chrome связанная скрипка от AfromanJ выглядит хорошо и ist настраивается. –

Смежные вопросы