Встраивание подергивания в выпуске - PullRequest
Новая
       8

Встраивание подергивания в выпуске

0 голосов
/ 15 сентября 2018

В настоящее время я обновляю веб-сайт для друга, который поддерживает потоковую передачу страниц. Технология выбора дергается, и я как бы привязан к Tumblr для хостинга.

Итак, проблема в том, что я написал код для встраивания twitch, а также немного css для соответствия спецификациям (он хочет, чтобы gif телевизионной статики был поверх видео-плеера, пока он не загружен). Он хорошо работает на локальном компьютере, но при загрузке на Tumblr я получаю 9 дубликатов загружаемого кода.

HTML-код состоит из разделов и статей, поэтому вся вещь (маска игрока + gif) была помещена в статью, чтобы соответствовать макету и использовать нативные css / js сайта.

Вот код, который я пытаюсь загрузить. 

<article class="entry fat-TV-container">
<div class="TV-label">

</div>
<div class="media" >
    <div id="twitch-player-mask"  style="position: absolute; height:1rem; width:100%" >
        <img class="test-player-item" src="Content/Static.gif" style="height:500px">
    </div>
    <iframe
            id="fat-TV"
            class="test-player-item"
            src="https://player.twitch.tv/?channel=fatzrh"
            height="300"
            width="100%"
            frameborder="0"
            scrolling="no"
            allowfullscreen="true"
            position="absolute"
    >
    </iframe>
</div>

JS 

<script type="text/javascript">
document.getElementById("twitch-player-mask").addEventListener("Twitch.Player.ONLINE", function (){
    var elem= document.getElementById("twitch-player-mask");
    elem.style.display="none";
});
document.getElementById("twitch-player-mask").addEventListener("Twitch.Player.OFFLINE",function (){
    var elem= document.getElementById("twitch-player-mask");
    elem.style.display="initial";
});</script>

CSS 

.player-item {
   object-position: center;
   padding-left: 28.5%;
   padding-right: 28.5%;}

.test-player-item {
   object-position: center;
 }

.fat-TV-container:hover #twitch-player-mask
{
  display: none;
}

У вас есть идеи о том, что не так с кодом или Tumblr?

РЕДАКТИРОВАТЬ: Решено. Для дальнейшего ознакомления, если кто-то столкнется с проблемой, попробуйте поместить все, что вы добавляете в html tumblr, вне тегов {Block: Posts} {/ Block: Posts}, так как в противном случае он будет применять код ко всем постам на странице. .

...