I'm using Fancybox to play a youtube video. Works as expected. Video pops up and plays great.
However, I would like to use both AUTOPLAY and Start Time when my video is clicked.
Here is the URL I'm trying.
http://www.youtube.com/watch?v=BwaKZ4r5fQM&autoplay=1&t=0m47s
Autoplay works fine, but the start time is ignored.
Any suggestions?
Thanks!
The easiest way to do is using fancybox media helpers so
1). Load the fancybox media helper js file :
<script type="text/javascript" src="{your correct path}/helpers/jquery.fancybox-media.js"></script>
2). Only set your youtube URL without any parameter like :
<a class="fancybox" href="http://www.youtube.com/watch?v=BwaKZ4r5fQM">Start YouTube in fancybox at 47 secs</a>
3). Enable the media helper in your fancybox custom initialization script and pass the youtube parameters using this format :
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
helpers: {
media: true
},
youtube: {
autoplay: 1, // enable autoplay
start: 47 // set start time in seconds (embed)
}
}); // fancybox
}); // ready
NOTE : the media helper will convert the video URL in its embed format like :
http://www.youtube.com/embed/BwaKZ4r5fQM
... where the parameter t={mm}m{ss}s is not longer valid.
With youtube embedded player you can select the start time using the start parameter followed by the number in seconds of the wanted starting time (as we did in the fancybox initialization script)
Related
I have a lecture on YouTube that I would like to use as the header movie for my twentyseventeen child themed website. I would like it with sound and without autoplay (As viewed on YouTube, the video has sound intact).
Following another question about autoplay, I set a video URL of https://www.youtube.com/watch?v=1dYAYBNU6qM&autoplay=0. The behavior does not appear to have changed. It starts immediately, but sound is muted.
How, with twentyseventeen, do I have an option of a media file that starts paused, and begins to play, with sound, if the user hits the 'Play' button?
You can use global object wp for get access to youtube player functions. Youtube video in twentyseventeen theme loads wp-custom-header.js file and creating new object in 384 line.
Here is some solution you can use:
var ww_timer = setTimeout(function ww_video() {
if(wp.customHeader.handlers.youtube.player == null){
ww_timer = setTimeout(ww_video, 50);
}else {
if(typeof wp.customHeader.handlers.youtube.player.unMute === "function") {
wp.customHeader.handlers.youtube.player.unMute();
wp.customHeader.handlers.youtube.player.stopVideo();
}else{
ww_timer = setTimeout(ww_video, 50);
}
}
}, 50);
This code goes to my_js.js file( I created it in the main directory of active child theme. You can add this code to another .js, if you have it ) of your active child theme. Also, we need to update functions.php file using this code:
function ww_youtube_functions(){
wp_enqueue_script('ww_youtube_video',get_stylesheet_directory_uri().'/my_js.js',array('wp-custom-header'),false, true);
}
add_action('wp_enqueue_scripts', 'ww_youtube_functions');
Required part of this code is array('wp-custom-header'): enqueue script with dependence with script wp-custom-header.
setTimeout is not best way. I believe, that it can be done with more elegant code.
But its tested and working.
Hello I'm displaying a youtube video in a div full screen.
It change size on resize window and the most important thing it load on demand and play/pause if it's on the viewport or not.
To control the viewport and lazy loading I'm using viewportchecker
So, ViewportChecker check if the DIV is in the viewport, if YES it start the funcion playPause1, the function will start the video or pause it in case the video is already being played.
$('#Wraptv1').viewportChecker({
callbackFunction: playPause1,
offset: 300,
repeat: true,
});
Everything works very good but sometimes the video is not respecting the startSeconds parameter mostly if the page is loaded when the video DIV is outside the viewport.
In this case the first video should start in the second 30 (as tou can see below in the video parameters) but it starts from the second 0.
video parameters:
var ystv1 = [{
'videoId': 'Gc2en3nHxA4',
'startSeconds': 30,
'endSeconds': 45,
'suggestedQuality': 'hd720'
},{
'videoId': 'Gc2en3nHxA4',
'startSeconds': 65,
'endSeconds': 90,
'suggestedQuality': 'hd720'
}, ],
Here the code example: https://codepen.io/ysanmiguel/pen/WEGwqO
any help or suggestion to fix this problem or improve the code?
thank you very much.
Same scenario is required in this SO post.
Here is the main problem of the user:
For my project I need to be able to control the current time that the
video is playing. I have searched the You-Tube API notes and data but
could not find a parameter nor a function that enables me to set the
current time of the video (There is a GET for the current time but not
a set).
You may also try the answer in this SO post and visit the following documents.
https://developers.google.com/youtube/js_api_reference
https://developers.google.com/youtube/youtube_player_demo
First you need a JS reference to the Player object. For a quick start,
please take a look at the following Question:
How do I get the reference to an existing YouTube player?
With this reference you can do:
player.seekTo(42); //Go to 42 seconds
I am getting 40 videos on load of page and using foreach loop for displaying, below is my html code of displaying video
<div id="videosList">
<div class="video" data-id="{{$i}}">
<div class="videoSlate">
<video id="videoDiv{{$i}}" class="thevideo"
preload="metadata"
poster="/{{$postDetails->video_thumbnail}}" loop>
<source src="/{{$postDetails->videos}}">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
and on mouseover to video i am playing the video and on mouseout i am stopping the video here is the javascript code for play and pause
<script>
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item) {
item.addEventListener('mouseover', hoverVideo, false);
item.addEventListener('mouseout', hideVideo, false);
});
function hoverVideo(e) {
$('.thevideo')[$(this).attr("data-id")].play();
}
function hideVideo(e) {
$('.thevideo')[$(this).attr("data-id")].pause();
}
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
each video size is not more than 6 mb, now the problem is for loading page it will take around 1 min, and for playing video on hover it will take around 15 to 20 seconds to play, is there any way to reduce the loading time and video playing time. I am using laravel framework, in local its working but in server it giving problem.
I don't know why you need 40 videos in the same page, but I would not at all recommand that:
YOUTUBE:
Youtube doesn't display 20 videos per page, but 20 placeholder images that are used as link to click on in order to display the video. It is pretty UX friendly, since loading time is considerably reduced (images instead of videos) and users can choose what they load.
FACEBOOK, TWITTER, ETC...:
Social networks such as Facebook, Twitter, etc are using a scroll script, which loads videos only when they are visible by the user. This means that if there are 100 videos on the page, only one or two will be loaded and displayed, because this is useless to load stuff that the user can't see (even more if this is a heavy file, such as a video). This can be done with Javascript or jQuery (Here is a pretty cool question which gives you a solution).
I really recommand you to choose one of those two approach, since I can't figure out a case which requires to display 40 videos on one page with one load.
I checked the Youtube API v3 iframe embed docs and am trying to apply player.clearVideo() function to my button as follows (ellipsis replaces code) :
...
function onPlayerReady(event) {
var zapButton = document.getElementById('zapvideo');
zapButton.addEventListener("click", function() {
player.clearVideo(); // NOT WORKING
});
}
...
$(function(){
$('#zapvideo').on('click', function(){ ... });
});
Nothing happens (no errors). player.stopVideo() and other controls work. How can I clear the video from the Youtube player? I'm using Youtube's HTML5 player, but even when Youtube switches to Flash player for some videos, I still cannot clear the video that's in the player (what's worst is that Youtube doesn't revert to the HTML5 player when an HTML5 compatible video is subsequently selected and played in my app regardless if I have opt-in HTML5 or added the relevant html5 playerVars, which means I cannot tab out of Flash-based player controls when they're in focus. So much for "key-bored" navigation!). I'm using Firefox 36.0.1 .
Any suitable workaround function to clear video while keeping the player available will be fine with me.
Found a workaround with the following code:
...
function onPlayerReady(event) {
...
$('#zapvideo').on('click', function(){
$('#player').hide();
event.target.loadVideoById('',0);
event.target.seekTo(0); // iOS
event.target.stopVideo();
return false;
});
}
#zapvideo button hides the iframe player since we don't want to see any error message in player after an empty or dummy video id is submitted via event.target.loadVideoById(). Remember to show player before playing a new video. The relevant code is encapsulated within the onPlayerReady() function to make sure the player is always ready prior to code execution.
I have a webpage that uses JQuery Countdown and I have an audio clip that plays when the coundown reaches zero.
Here's the relevant code:
<script>
$(function (){
$('#Timer1Timer').countdown({until: +(28800), onExpiry: play_single_sound});
$('#Timer2Timer').countdown({until: +(172800), onExpiry: play_single_sound});
$('#Timer3Timer').countdown({until: +(10), onExpiry: play_single_sound});
});
function play_single_sound() {
document.getElementById('audiotag1').play();
}
</script>
<audio id="audiotag1" src="audio/alert.wav" preload="auto"></audio>
The audio plays just fine when I have the page open in it's own window and I'm using a separate window to view another page. However, if I have a different tab open and active in the same window, the audio will not play when the countdown completes.
Any sort of assistance or explanation would be wonderful!
I don't think you need a plugin to replace javascript's native setTimeout. Try setTimeout(play_single_sound, 5000)