fix fullscreen video on click
This commit is contained in:
parent
c4ddefd45a
commit
95358281ef
@ -79,18 +79,16 @@ $('audio').mediaelementplayer({
|
||||
});
|
||||
{% endif %}
|
||||
|
||||
var video = $("video");
|
||||
video.on('click', function(e){
|
||||
var vid = video[0];
|
||||
vid.play();
|
||||
if (vid.requestFullscreen) {
|
||||
vid.requestFullscreen();
|
||||
} else if (vid.mozRequestFullScreen) {
|
||||
vid.mozRequestFullScreen();
|
||||
} else if (vid.webkitRequestFullscreen) {
|
||||
vid.webkitRequestFullscreen();
|
||||
}
|
||||
});
|
||||
function goFullscreen(id) {
|
||||
var element = document.getElementById(id);
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen();
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen();
|
||||
} else if (element.webkitRequestFullScreen) {
|
||||
element.webkitRequestFullScreen();
|
||||
}
|
||||
}
|
||||
|
||||
$(function() {
|
||||
$("img.lazy").lazyload({
|
||||
|
@ -9,7 +9,7 @@
|
||||
<section class="bordered-picture baguette" style="position: relative;">
|
||||
<div class="caption">
|
||||
<img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" src="" alt="">
|
||||
<video class="lazy responsive-video" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="none" muted>
|
||||
<video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="none" muted>
|
||||
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
|
||||
</video>
|
||||
{% if caption %}
|
||||
|
@ -12,7 +12,7 @@
|
||||
{% set format = settings.ffmpeg.extension %}
|
||||
{{ video.copy() }}
|
||||
<img class="lazy" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
|
||||
<video class="lazy responsive-video" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
|
||||
<video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
|
||||
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
|
||||
</video>
|
||||
{% if caption %}
|
||||
|
@ -62,18 +62,16 @@ $(document).ready(function(){
|
||||
$('.parallax').parallax();
|
||||
});
|
||||
|
||||
var video = $("video.lazy");
|
||||
video.on('click', function(e){
|
||||
var vid = video[0];
|
||||
vid.play();
|
||||
if (vid.requestFullscreen) {
|
||||
vid.requestFullscreen();
|
||||
} else if (vid.mozRequestFullScreen) {
|
||||
vid.mozRequestFullScreen();
|
||||
} else if (vid.webkitRequestFullscreen) {
|
||||
vid.webkitRequestFullscreen();
|
||||
}
|
||||
});
|
||||
function goFullscreen(id) {
|
||||
var element = document.getElementById(id);
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen();
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen();
|
||||
} else if (element.webkitRequestFullScreen) {
|
||||
element.webkitRequestFullScreen();
|
||||
}
|
||||
}
|
||||
|
||||
{% if gallery.audio_enabled %}
|
||||
$('audio').mediaelementplayer({
|
||||
|
@ -12,7 +12,7 @@
|
||||
<div class="bordered-picture baguette caption">
|
||||
{% if video %}
|
||||
<img class="responsive-img lazy z-depth-2" data-original="{{ video.generate_thumbnail("2000") }}" alt="">
|
||||
<video class="lazy responsive-video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
|
||||
<video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
|
||||
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
|
||||
</video>
|
||||
{% else %}
|
||||
|
@ -12,7 +12,7 @@
|
||||
{% set format = settings.ffmpeg.extension %}
|
||||
{{ video.copy() }}
|
||||
<img class="z-depth-2 lazy responsive-img" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
|
||||
<video class="lazy responsive-video" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
|
||||
<video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
|
||||
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
|
||||
</video>
|
||||
{% if caption %}
|
||||
|
Loading…
x
Reference in New Issue
Block a user