In my code I tried pausing the youtube video by using Javascript. I took this question (below) as a reference, and it works great.
How to pause a YouTube player when hiding the iframe?
The problem is that it is refreshing my website. I'm not exactly sure as to why that is or if there is any sort of workaround... This is my code... I'm using an AjaxModalPopupExtender to hide/show my div.
function ShowModalVideo() {
var Popup = $find("<%=mpeVideo.ClientID%>");
if (Popup) {
Popup.show();
}
return false;
}
function HideModalVideo() {
var Popup = $find("<%=mpeVideo.ClientID%>");
if (Popup) {
Popup.hide();
var iframe = document.getElementById("youtube");
iframe.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}
return false;
}
I'd really appreciate any help or insight on the matter.
Related
I have a page with video thumbnails. When a video is clicked, it opens file video.html and passes the video path to it.
I am trying to make video.html open the video in full screen but when I say full screen I really mean all screen with no browser visible.
This is the contents of video.html
<body>
<script>
window.onload=function() {
let videoDiv = createVideoDiv()
if (videoDiv.requestFullscreen) {
videoDiv.requestFullscreen();
}
else if (videoDiv.mozRequestFullScreen) {
videoDiv.mozRequestFullScreen();
}
else if (videoDiv.webkitRequestFullScreen) {
videoDiv.webkitRequestFullScreen();
}
else if (videoDiv.msRequestFullscreen) {
videoDiv.msRequestFullscreen();
}
document.getElementById("myVideo").appendChild(videoDiv);
}
</script>
<div id="myVideo"></div>
</body>
this is createVideoDiv():
function createVideoDiv() {
var video = document.createElement("VIDEO");
video.setAttribute('controls', '');
video.setAttribute('autoplay', '');
video.setAttribute('width', '100%');
var source = document.createElement("SOURCE");
source.setAttribute('src', getClickedVideo());
source.setAttribute('type', 'video/mp4');
video.appendChild(source);
return video;
}
and this is the css:
#contentVideo:fullscreen {
width:100vw;
height:100vh;
}
The page opens, the video autoplays, it's filling the whole inner part of the browser. I still see the browser.
How do I do that?
Becoming full screen should be done by one user action, click, tap, or etc.
It has a JS code of course, but wouldn't run automatically when pages loads, because browser prevents that unless user does something.
That is a good and maybe necessary feature in order to stop ads annoy people.
So, simply make a button or something and assign your function as onclick handler.
As F.NiX stated try to addEventListener to the window, when user clicks or presses a button or some other user input event. Then inside the callback just call element.requestFullscreen() on the DOM element you want to go fullscreen. You can refer to this page for details: MDN Fullscreen API docs
For example, when user clicks somewhere on the page, the element will go fullscreen.
window.addEventListener('mousedown', ()=>element.requestFullscreen(), {once:true});
I've added {once:true} simply to delete the listener once it is called so it doesn't slow down the page. You can remove it if you want to.
I have multiple pop ups on one page. each pop up not coded with bootstrap, has a bootstrap carousel inside it. within those bootstrap carousels there may or may not be a vimeo video.
The issue were having is stopping the video from playing on dismiss of the popup or pressing the left and right buttons because with there being multiple videos in different carousels the script below copies the video from the first src it finds and replaces every video with that src.
I've tried using closest() and find() and also tried both of those on the script within the click function to say (this).closest($frame) but this doesn't work either.
Any help would be greatly appreciated.
function stopVideo() {
var $frame = $('iframe#nofocusvideo');
// saves the current iframe source
var vidsrc = $frame.attr('src');
// sets the source to nothing, stopping the video
$frame.attr('src', '');
// sets it back to the correct link so that it reloads immediately on the next window open
$frame.attr('src', vidsrc);
}
$(".carousel-control-prev").click(function(){
stopVideo();
});
$(".carousel-control-next").click(function(){
stopVideo();
});
$(".fa-times").click(function(){
stopVideo();
});
var $frame = $('.carousel-item.active').find('iframe'); fixed this issue
I'm trying to figure out which code is used to disable the back button of browser on this website: turkish airlines desktop website ( https://p.turkishairlines.com/ )
Once the main landing page loads the site doesn't let you go back. I've examined many different codes that disables the back function of the browser but this website doesn't seem to be using any of them.
I would really appreciate it if you can help me.
Thanks in advance.
Hi you can use this script to disable the back button
<script>
$(document).ready(function() {
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function(evt) { if (evt.persisted)
disableBack() }
});
</script>
I have an iframe with a html5 video player and it also has some javascript that makes a Click Pause/Play event and it works fine if I visit the page directly. But if I access it from an iframe I must first double click it to get the single click event working.
Can anybody help please.
This is the javascript being executed.
<script>
var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
if (videoPlaying) {
video.pause();
videoPlaying = false;
}
else {
video.play();
videoPlaying = true;
}
}
</script>
It is because the iframe is drawn as a separate web page, and as such needs to gain focus before the button inside it can be clicked.
I'm looking to direct the user on the channell webpage instead of the video url that I'm embedding.
I've read the api and I didn't see any way to achieve this.
I tried enclosing the embedded video in a and I added this code:
$('#youtube').click(function() {
document.write('http://www.youtube.com/user/0plus1');
return false;
});
And surprise it won't work.
How, if it's even possible I can do this?
The document.write will do nothing. If you want to redirect, you should write
$('#youtube').click(function() {
window.location.href = 'http://www.youtube.com/user/trasportareoggi';
// or you could use window.replace('http://www.youtube.com/user/trasportareoggi');
return false;
});