Почему не работает mediaelementplayer для youtube в iframe?

usergeyv

Знаток
Регистрация
5 Июл 2013
Сообщения
152
Реакции
25
Впервые столкнулся с Для просмотра ссылки Войди или Зарегистрируйся , суть проблемы в том, что когда открываешь сам
Код:
src="https://videobimba.com/embed/pBUgeNyYfqwABp4"
все работает и плеер запускается, но если вставить в <iframe>
Для просмотра ссылки Войди или Зарегистрируйся
плеер не запускается, почему так происходит?
HTML:
<html><head>
  <meta charset="UTF-8">
  <script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflZzD3G3/www-widgetapi.js" async=""></script><script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://videobimba.com/themes/youplay/player/css/mediaelementplayer.min.css">
  <script src="https://videobimba.com/themes/youplay/player/js/mediaelement-and-player.min.js"></script>
  <script src="https://videobimba.com/themes/youplay/player/plugins/speed/speed.min.js"></script>
  <link rel="stylesheet" href="https://videobimba.com/themes/youplay/player/plugins/speed/speed.min.css">
  <script src="https://videobimba.com/themes/youplay/player/plugins/speed/speed-i18n.js"></script>
  <script src="https://videobimba.com/themes/youplay/player/plugins/jump/jump-forward.min.js"></script>
  <link rel="stylesheet" href="https://videobimba.com/themes/youplay/player/plugins/jump/jump-forward.min.css">
  <script src="https://videobimba.com/themes/youplay/player/plugins/ads/ads.min.js"></script>
  <link rel="stylesheet" href="https://videobimba.com/themes/youplay/player/plugins/ads/ads.min.css">
  <script src="https://videobimba.com/themes/youplay/player/plugins/ads/ads-i18n.js"></script>
  <script src="https://videobimba.com/themes/youplay/player/plugins/vast/ads-vast-vpaid.js"></script>
  <script src="https://videobimba.com/themes/youplay/player/plugins/quality/quality.min.js"></script>
  <link rel="stylesheet" href="https://videobimba.com/themes/youplay/player/plugins/quality/quality.min.css">
    <title>Дэдпул 2016 | Русский Трейлер</title>
</head>
<body>
  <div class="video-player embed-video-player" style="overflow: hidden;">
                            <span class="mejs__offscreen">Video Player</span><div id="mep_0" class="mejs__container mejs__container-keyboard-inactive mejs__video" tabindex="0" role="application" aria-label="Video Player" style="width: 100%; height: 100%; min-width: 247px;"><div class="mejs__inner"><div class="mejs__mediaelement"><mediaelementwrapper id="my-video"><div id="my-video-iframe-overlay" class="mejs__iframe-overlay"></div><iframe id="my-video_youtube_iframe" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" src="https://www.youtube.com/embed/b38vW1-B-gQ?controls=0&amp;rel=0&amp;disablekb=1&amp;showinfo=0&amp;modestbranding=0&amp;html5=1&amp;iv_load_policy=3&amp;autoplay=0&amp;end=0&amp;loop=0&amp;playsinline=0&amp;start=0&amp;nocookie=false&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fvideobimba.com&amp;widgetid=1"></iframe><video id="my-video_from_mejs" style="width: 100%; height: 100%; display: none;" poster="https://i.ytimg.com/vi/b38vW1-B-gQ/mqdefault.jpg" preload="none" src="https://www.youtube.com/watch?v=b38vW1-B-gQ">
                                                                                                                                                                                       <source src="https://www.youtube.com/watch?v=b38vW1-B-gQ" type="video/youtube" data-quality="360p" title="360p" label="360p" res="360">
                      Your browser does not support HTML5 video.
               <!-- //src="http://www.youtube.com/watch?v=nOEw9iiopwI" type="video/youtube" -->
            </video></mediaelementwrapper></div><div class="mejs__layers"><div class="mejs__poster mejs__layer" style="background-image: url(&quot;https://i.ytimg.com/vi/b38vW1-B-gQ/mqdefault.jpg&quot;); width: 100%; height: 100%;"><img class="mejs__poster-img" width="0" height="0" src="https://i.ytimg.com/vi/b38vW1-B-gQ/mqdefault.jpg"></div><div class="mejs__overlay mejs__layer" style="width: 100%; height: 100%; display: none;"><div class="mejs__overlay-loading"><span class="mejs__overlay-loading-bg-img"></span></div></div><div class="mejs__overlay mejs__layer" style="display: none; width: 100%; height: 100%;"><div class="mejs__overlay-error"></div></div><div class="mejs__overlay mejs__layer mejs__overlay-play" style="width: 100%; height: 100%;"><div class="mejs__overlay-button" role="button" tabindex="0" aria-label="Play" aria-pressed="false"></div></div></div><div class="mejs__controls"><div class="mejs__button mejs__playpause-button mejs__play"><button type="button" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button></div><div class="mejs__time mejs__currenttime-container" role="timer" aria-live="off"><span class="mejs__currenttime">00:00</span></div><div class="mejs__time-rail"><span class="mejs__time-total mejs__time-slider"><span class="mejs__time-buffering" style="display: none;"></span><span class="mejs__time-loaded"></span><span class="mejs__time-current" style="transform: scaleX(0);"></span><span class="mejs__time-hovered no-hover"></span><span class="mejs__time-handle" style="transform: translateX(0px);"><span class="mejs__time-handle-content"></span></span><span class="mejs__time-float"><span class="mejs__time-float-current">00:00</span><span class="mejs__time-float-corner"></span></span></span></div><div class="mejs__time mejs__duration-container"><span class="mejs__duration">02:59</span></div><div class="mejs__button mejs__jump-forward-button"><button type="button" aria-controls="mep_0" title="Jump forward 20 seconds" aria-label="Jump forward 20 seconds" tabindex="0">20</button></div><div class="mejs__button mejs__volume-button mejs__mute"><button type="button" aria-controls="mep_0" title="Mute" aria-label="Mute" tabindex="0"></button><a href="javascript:void(0);" class="mejs__volume-slider" aria-label="Volume Slider" aria-valuemin="0" aria-valuemax="100" role="slider" aria-orientation="vertical" aria-valuenow="80" aria-valuetext="80%"><span class="mejs__offscreen">Use Up/Down Arrow keys to increase or decrease volume.</span><div class="mejs__volume-total"><div class="mejs__volume-current" style="bottom: 0px; height: 80%;"></div><div class="mejs__volume-handle" style="bottom: 80%; margin-bottom: -3px;"></div></div></a></div><div class="mejs__button mejs__fullscreen-button"><button type="button" aria-controls="mep_0" title="Fullscreen" aria-label="Fullscreen" tabindex="0"></button></div></div></div></div>
                      </div>


<style>
body {
  margin: 0;
  padding: 0;
}
video {
  width: 100%;
  height: 100%;

}
.watermark {
  position: absolute;
  z-index: 10;
  left: 20px;
  top: 20px;
  transition: all 0.5s;
  display: none;
}
.ad-image { width: 100%; height: 100%; background-color: #fcfcfc; text-align: center; z-index: 9; line-height: 100%; position: absolute; overflow: hidden; top: 0; }
.ad-image img { text-align: center; max-width: 100%; margin-top: 5%; vertical-align: middle; }
.ads-test { color: #ffcc7f; width: 100%; padding: 10px; background-color: rgba(0, 0, 0, 0.5); }
.embed-video-player{position: relative;}
</style>
<script>
$(".video-player").hover(
    function(e){
      $('.watermark').css('display', 'block');
     },
    function(e){
      setTimeout(function () {
        if ($('.video-player:hover').length == 0) {
          $('.watermark').css('display', 'none');
        }
      }, 1000);
     }
);
// $('video, audio').mediaelementplayer({
//   // Do not forget to put a final slash (/)
//   pluginPath: 'https://cdnjs.com/libraries/mediaelement/',
//   // this will allow the CDN to use Flash without restrictions
//   // (by default, this is set as `sameDomain`)
//   shimScriptAccess: 'always',

//   features: ['playpause','progress','current','duration','tracks','contextmenu','volume'],
//   contextMenuItems: [{ isSeparator: true }],
//   success: function (media) {
//      var isYoutube = ~media.rendererName.indexOf('youtube');
//   }
//   // more configuration
// });
function pt_elexists(el){
  return ($(el).length > 0);
}
var played = false;
$('video').mediaelementplayer({
      pluginPath: 'https://cdnjs.com/libraries/mediaelement-plugins/',
      shimScriptAccess: 'always',
      autoplay: true,
      stretching: 'none',
      features: ['playpause', 'current', 'progress', 'duration', 'speed', 'skipback', 'jumpforward', 'tracks', 'markers', 'volume', 'chromecast', 'contextmenu', 'flash'   , 'fullscreen'],
      vastAdTagUrl: '',
      vastAdsType: '',
      jumpForwardInterval: 20,
      adsPrerollMediaUrl: [''],
      adsPrerollAdUrl: [''],
      adsPrerollAdEnableSkip: 0,
      adsPrerollAdSkipSeconds: 0,
      success: function (media) {
          media.addEventListener('ended', function (e) {
            if ('' == 'vast' && played == false) {
            
              setTimeout(function () {
                $('video').attr('src', 'https://www.youtube.com/watch?v=b38vW1-B-gQ');
                $('video')[0].play();
                played = true;
              },100)

            
            }
          }, false);

          media.addEventListener('playing', function (e) {
            if (pt_elexists('.ads-overlay-info')) {
              $('.ads-overlay-info').remove();
            }

            $('.ads-test').remove();
            
            if ($('body').attr('resized') == 'true') {
                PT_Resize(true);
            }
            //$('#mep_0').css('height', ($('#mep_0').width() / 1.77176216) + 'px');
            $('video, iframe').css('height', '100%');
            $('video, iframe').css('width', '100%');

          });
      },
    });
if ('' == 'vast' && played == false) {
  $('.mejs__ads-skip-button').click(function(event) {
    $('video').attr('src', 'https://www.youtube.com/watch?v=b38vW1-B-gQ');
    played = true;
  });
}



$('.ad-link').on('click', function(event) {
  $('.ad-link').remove();
  $('video')[0].play();
});

$('.rad-transaction').click(function(event) {
      $(this).off("click").removeClass('rad-transaction');
      $.get('https://videobimba.com/aj/ads/rad-transaction', function(data){ /* pass */ });
    });


</script></body></html>
 
возможно защита от iframe стоит. такое бывает
 
в DLE это реализовано на уровне безопасности:
Включить блокирование встраивания сайта в фреймы
При включении данной настройки, скрипт будет автоматически блокировать показ вашего сайта, если он был встроен в iframe на каком либо чужом сайте. Тем самым вы можете предотвращать такие атаки как кликджекинг.
 
Назад
Сверху