Рубрика: Soft
Как вывести во всплывающем окне видео с Kinescope. Решено
Переехал с Vimeo на Kinescope на своем сайте www.fitosauna.ru
Нет, Vimeo всем устраивал.
Кроме того, что перестал принимать платежи из России.
Оплатил пару раз через Payholder , но, опять же , не без проблем.
В общем, возвращаясь, видео перенес, но осталась последняя проблема.
В записях в блоге у меня есть шорткоды с всплывающими окнами с видео. Выполнены на lightbox
С vimeo это работало, а вот с Kinescope простой заменой ссылок не получилось. Видео стали открываться в новом окне, а не во всплывающем.
После нескольких консультаций с ТП Kinescope и помощью моего вебмастера получилось решить следующим образом -
В function.php родительской темы старый шорткод, который был сделан под vimeo и lightbox, заменил на
</pre>
<div>
<div>//Шорткод таблицы УТПшек</div>
<div>function text_short() {</div>
<div> return '<table class="adaptirovano utpeffect" border="0" width="100%"></div>
<div><tbody></div>
<div><tr></div>
<div> <td class="utp-n3"></div>
<div> <a href="https://kinescope.io/xkhHxV9ezHcgFt6rCaPKdo" class="kinescope-video"></div>
<div> <img class="aligncenter" title="Кедровые фитобочки и ик-сауны премиум-класса" src="/blog/htdocs/blog/wp-content/uploads/2016/10/Premium_kachestvo_square.png" alt="Кедровые фитобочки и ик-сауны премиум-класса" width="100" height="150" /></div>
<div> </a></div>
<div> </td></div>
<div> <td class="utp-n2"></div>
<div> <a href="/blog/htdocs/blog/wp-content/uploads/2016/10/Bez-predoplatyi.jpg" rel="wp-video-lightbox"></div>
<div> <img class="aligncenter" title="Купить без предоплаты кедровую фитобочку и инфракрасную сауну" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/Bez_predoplaty_square.png" alt="Купить без предоплаты кедровую фитобочку и инфракрасную сауну" width="100" height="150" /></div>
<div> </a></div>
<div> </td></div>
<div> <td class="utp-n3"></div>
<div> <a href="https://kinescope.io/kJ8HRVza3wB1Nsg8EQA4xD" class="kinescope-video"></div>
<div> <img class="aligncenter" title="Тройная гарантия на кедровые фитобочки и ик-сауны" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/Troynaya_garantiya_square.png" alt="Тройная гарантия на кедровые фитобочки и ик-сауны" width="100" height="150" /></div>
<div> </a></div>
<div> </td></div>
<div> <td class="utp-n4"></div>
<div> <a href="/blog/htdocs/blog/wp-content/uploads/2016/10/Soberem-i-ustanovim.jpg" rel="wp-video-lightbox"></div>
<div> <img class="aligncenter" title="Соберем и установим кедровую фитобочку и инфракрасную сауну" src=" /blog/htdocs/blog/wp-content/uploads/2016/10/soberem_square.png" alt="Соберем и установим кедровую фитобочку и инфракрасную сауну" width="100" height="150" /></div>
<div> </a></div>
<div> </td></div>
<div></tr></div>
<div></tbody></div>
<div></table>';</div>
<div>}</div>
<div>add_shortcode('utp', 'text_short');</div>
<div>//Конец шорткода таблицы УТПшек</div>
</div>
<pre>
Заодно сделали новый шорткод для вставки видео с уникальными торговыми преимуществами (УТП) парогенератора ПЭ-2.0:
</div>
<div>
<div>
<div>//Шорткод таблицы УТПшек для парогенераторов</div>
<div>function text_short_pg() {</div>
<div> return '<table class="adaptirovano utpeffect white-background utppg" border="0" width="100%"></div>
<div><tbody></div>
<div><tr></div>
<div> <td style="background: #fff;" class="utp-n103"></div>
<div> <a href="https://kinescope.io/4WGXkhKVWdt4XPTYue9YH8" class="kinescope-video"></div>
<div> <img class="aligncenter" title="Удобнее в управлении, чем другие парогенераторы" src="/blog/htdocs/blog/wp-content/uploads/2018/10/Udobnee_rect.jpg" alt="Удобнее в управлении, чем другие парогенераторы" width="165" height="57" /></div>
<div> </a></div>
<div> </td></div>
<div> <td style="background: #fff;" class="utp-n104"></div>
<div> <a href="https://kinescope.io/j9sWdzB3NrcuaBZ5aBpx8D" class="kinescope-video"></div>
<div> <img class="aligncenter" title="В 16 раз эффективнее, чем другие парогенераторы" src="/blog/htdocs/blog/wp-content/uploads/2018/10/Effectivnee_rect.jpg" alt="В 16 раз эффективнее, чем другие парогенераторы" width="165" height="57" /></div>
<div> </a></div>
<div> </td></div>
<div> <td style="background: #fff;" class="utp-n105"></div>
<div> <a href="https://kinescope.io/dzvR6rPDWehHQJTao7gXNV" class="kinescope-video"></div>
<div> <img class="aligncenter" title="В 7,4 экономичнее, чем другие парогенераторы" src="/blog/htdocs/blog/wp-content/uploads/2018/10/Economichnee_rect.jpg" alt="В 7,4 экономичнее, чем другие парогенераторы" width="165" height="57" /></div>
<div> </a></div>
<div> </td></div>
<div></tr></div>
<div></tbody></div>
<div></table>';</div>
<div>}</div>
<div>add_shortcode('utppg', 'text_short_pg');</div>
<div>//Конец шорткода таблицы УТПшек</div>
<div>
а в конец footer.php дочерней темы залили скрипт —
</div>
<div>
<div>
<div><script></div>
<div> document.addEventListener('DOMContentLoaded', function() {</div>
<div> document.querySelectorAll('.kinescope-video').forEach(function(link) {</div>
<div> link.addEventListener('click', function(e) {</div>
<div> e.preventDefault();</div>
<div> var videoUrl = this.href;</div>
<div> var popup = document.createElement('div');</div>
<div> popup.style.cssText = `</div>
<div> position: fixed;</div>
<div> top: 0; left: 0;</div>
<div> width: 100%; height: 100%;</div>
<div> background: rgba(0,0,0,0.9);</div>
<div> z-index: 9999;</div>
<div> display: flex;</div>
<div> align-items: center;</div>
<div> justify-content: center;</div>
<div> `;</div>
<div> // контейнер всегда 16:9</div>
<div> var videoWrapper = document.createElement('div');</div>
<div> videoWrapper.style.cssText = `</div>
<div> width: 90%;</div>
<div> max-width: 1400px;</div>
<div> aspect-ratio: 16/9;</div>
<div> position: relative;</div>
<div> background: black;</div>
<div> border-radius: 8px;</div>
<div> overflow: hidden;</div>
<div> box-shadow: 0 10px 30px rgba(0,0,0,0.5);</div>
<div> display: flex;</div>
<div> align-items: center;</div>
<div> justify-content: center;</div>
<div> `;</div>
<div> // iframe занимает либо всю ширину, либо всю высоту</div>
<div> var iframe = document.createElement('iframe');</div>
<div> iframe.src = videoUrl;</div>
<div> iframe.allowFullscreen = true;</div>
<div> iframe.style.cssText = `</div>
<div> width: 100%;</div>
<div> height: 100%;</div>
<div> border: none;</div>
<div> object-fit: contain;</div>
<div> `;</div>
<div> var closeBtn = document.createElement('div');</div>
<div> closeBtn.innerHTML = '×';</div>
<div> closeBtn.style.cssText = `</div>
<div> position: absolute;</div>
<div> top: 20px; right: 30px;</div>
<div> color: white;</div>
<div> font-size: 40px;</div>
<div> cursor: pointer;</div>
<div> z-index: 10000;</div>
<div> font-weight: bold;</div>
<div> text-shadow: 2px 2px 4px rgba(0,0,0,0.5);</div>
<div> `;</div>
<div> videoWrapper.appendChild(iframe);</div>
<div> popup.appendChild(videoWrapper);</div>
<div> popup.appendChild(closeBtn);</div>
<div> document.body.appendChild(popup);</div>
<div> closeBtn.addEventListener('click', function() {</div>
<div> document.body.removeChild(popup);</div>
<div> });</div>
<div> popup.addEventListener('click', function(e) {</div>
<div> if (e.target === popup) {</div>
<div> document.body.removeChild(popup);</div>
<div> }</div>
<div> });</div>
<div> document.addEventListener('keydown', function escHandler(e) {</div>
<div> if (e.key === 'Escape' && document.body.contains(popup)) {</div>
<div> document.body.removeChild(popup);</div>
<div> document.removeEventListener('keydown', escHandler);</div>
<div> }</div>
<div> });</div>
<div> });</div>
<div> });</div>
<div> });</div>
<div></script></div>
<div>
Всё заработало.
P.S. Хотите получать уведомления о новых статьях этого блога? Нажмите на эту кнопку -
Свежие записи
