Html code:
------------
<div class="video-component">
<div class="video-block">
<div class="video-wrap">
<video controls preload="none" muted playsinline poster=""
{% if component.image %}
{% for min_width, video_size in versions_params.resolutions.items %}
data-poster-{{min_width}}="{% version_url component.image.name video_size extension='jpg' %}"
{% endfor %}
{% endif %}
>
{% for extension in versions_params.extensions %}
{% for min_width, video_size in versions_params.resolutions.items %}
<source data-src="{% version_url component.video.name video_size extension=extension %}" type="video/{{ extension }}" data-min-width={{min_width}}>
{% endfor %}
{% endfor %}
</video>
<div class="video-play">
<span class="icon-play"></span>
</div>
</div>
</div>
<div class="video-caption">{{ component.caption }}</div>
</div>
javascript code:
------------------
const videos = $('.video-component video');
function addSourceToVideo(element, screen) {
element.find(`[data-min-width=${screen}]`).each(function() {
$(this).attr('src', $(this).data('src'));
});
element[0].load();
element.attr('poster', element.data(`poster-${screen}`));
}
function videoSize() {
if (videos.get(0)) {
videos.each(function() {
const windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
const screen = windowWidth < 768 ? '320' : windowWidth > 767 && windowWidth < 1220 ? '768' : '1220';
addSourceToVideo($(this), screen);
});
}
}
function handlePlay() {
videos.on('play', function (){
$(this).next().hide();
});
}
function playVideo() {
$('.video-play').on('click', function (){
$(this).prev().get(0).play();
});
}
$(function() {
videoSize();
playVideo();
handlePlay();
});
----------------------------------------------------
не работает только на ipad, и только тогда , когда у мнея вертикальная видео.