I'm trying to use a script in which I feature some tumblr video posts (those tagged with "featured" word) but I have two problems:
1) I don't know how set a size for the videos on the page (ideal 300 width). they are stuck on 400px.
2) I'd like the videos to grow to 1000px width, when people click play.
My tumblr is on cookjs.tumblr.com
can anyone help? thank you so much in advance!
<script>
if ($('p img').length > 0)
$(".textpost").css("overflow","hidden");
var rssurl = '/tagged/{text:Featured Tag}/rss';
$.get(rssurl, function(data) {
var $xml = $(data);
var vari = 0;
$xml.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text()
}
vari = vari +1;
if(vari <4){
$('.featured-subhead').append('<section class=""><h2>
</h2>
<div class="">' + item.description + '</div><div class="">
Read More</div></section>');
}
});
});
</script>
So the right way of doing this is probably through the YouTube IFrame Player API. You'll be specifically interested in the onStateChange event listener. There's another way that I've done this that you may be interested in; here's the jQuery (since I was new to JS at the time):
$('iframe[src*="youtube.com"]').each(function(){
var videoURL = $(this).attr('src');
var videoID = videoURL.substr(videoURL.length - 11,11);
var thumbURL = 'http://img.youtube.com/vi/' + videoID + '/0.jpg';
$(this).wrap("<div class='video'></div>");
var videoDiv = $(this).parent();
videoDiv.css('background-image', 'url("' + thumbURL + '")').attr('id',videoID);
var heightUnit = $(this).height()*.25;
var widthUnit = $(this).width()*.20;
videoDiv.css('background-position', '0%, -' + heightUnit + 'px');
$(this).remove();
var playButton = $('<img />').attr({
'class': 'button',
'src':'playbutton.png'
}).css({
'width':widthUnit,
'margin-top': '-' + (widthUnit/2)*.783,
'margin-left': '-' + (widthUnit/2)
});
videoDiv.append(playButton);
playButton.on("click",function(){
$(this).css('opacity','0');
var newFrame = $('<iframe />').attr({
'src': 'http://www.youtube.com/embed/' + videoID + '?autoplay=1',
'frameBorder':'0'
});
videoDiv.append(newFrame);
});
});
What this is doing is grabbing the video url from each video on the page, removing the iframe and replacing it with the thumbnail (hosted by YouTube) and a separate clickable button. You can attach any handler you want to the button (even create your own button) but you'll also want to reload a new iframe with the embed url and append ?autoplay=1 to the end, which will start the video.
Here's a demo of this effect; something I coded a few years ago.
you can simply change the iframe height and width by using
function resizeIfrmae()
{
// your ifrmae id or you can pass id via function param
// resizeIfrmae(id) like this
$('#youtube_iframe_id').css('width','150');
$('#youtube_iframe_id').css('height','150');
}
onclick call this function
resizeIfrmae();
Related
I have built an image gallery where there is one main image and up to 5 thumbnails under it. and can use left and right buttons to cycle through the thumbnails and replace the main image like so:
$(".gallery-btn-left").unbind("click").bind("click", function(){
var image_id = $(".gallery-main-image img").attr('data-id');
image_id--;
if(image_id == 0){image_id = $('.gallery-thumbnail img').length;}
var image_url = $(".gallery-thumbnail img[data-id=" + image_id + "]").attr('src');
$(".gallery-main-image img").attr('src', image_url);
$(".gallery-main-image img").attr('data-id', image_id);
});
$(".gallery-btn-right").unbind("click").bind("click", function(){
var image_id = $(".gallery-main-image img").attr('data-id');
image_id++;
if(image_id > $('.gallery-thumbnail img').length){image_id = 1;}
var image_url = $(".gallery-thumbnail img[data-id=" + image_id + "]").attr('src');
$(".gallery-main-image img").attr('src', image_url);
$(".gallery-main-image img").attr('data-id', image_id);
});
This all works fine, however, if I want to put two galleries on the same page I get an issue where by my JS is getting 10 instead of 5 or however may thumbnails there are (max 5 per gallery) for $('.gallery-thumbnail img').length which is expected.
What I want to know is if there is a way to get the length of the amount of thumbnails in the parent gallery rather than how many thumbnails there are on the page as a whole.
The most common approach for multiple instances is to look up to the container instance and then use find() within that instance.
Also when you look for the same selector multiple times it is best to store a reference to it rather than search the DOM every time you need to access it. It also makes the code a little easier to read
Something like:
$(".gallery-btn-left").unbind("click").bind("click", function() {
var $gallery = $(this).closest('.MAIN-GALLERY-CLASSNAME'),
$mainImg = $gallery.find(".gallery-main-image img"),
$thumbs = $gallery.find('.gallery-thumbnail img'),
image_id = $mainImg.attr('data-id');
image_id--;
if (image_id == 0) {
image_id = $thumbs.length;
}
var image_url = $thumbs.filter("[data-id=" + image_id + "]").attr('src');
$mainImg.attr({'src': image_url, 'data-id',image_id});
});
I am lazy loading Wistia videos and they are injected into the DOM after a click of an image. I am trying to get handles on the videos in order to pause videos when a new video starts playing, but Wistia API callback is not firing.
function getAllVideos() {
window._wq = window._wq || [];
console.log(window._wq)
window._wq.push({
id: "_all",
onEmbedded: function(video) {
console.log('inside ready');
}
})
console.log(window._wq)
}
I am always receiving an empty array. Wistia.api.all() also returns an empty array. It might be because of async? I am injecting the iframe by making a call to the Wistia api like so:
$slide.getJSON('http://fast.wistia.com/oembed/?url=http://home.wistia.com/medias/' + embed + '&format=json')
.then(res => {
var thumbnail = new Image(); // create image to hold thumbnail
thumbnail.src = res.thumbnail_url; // set thumbnail source
var videoContainer = document.getElementById('slick-slide0' + i); // each slide get video container
videoContainer.appendChild(thumbnail);
videoContainer.innerHTML += '<div class="play-button"></div>';
var slider = document.getElementById('slick-slide-control0' + i);
// on click of each image, create iframe, remove image, insert iframe
videoContainer.addEventListener('click', function() {
var iframeEmbed = document.getElementById('{{parent_custom_widget_name}}_' + i).innerHTML;
var iframe = document.createElement('iframe');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', 'true');
iframe.setAttribute('src', '//fast.wistia.net/embed/iframe/' + iframeEmbed + '?autoplay=true');
this.innerHTML = '';
this.appendChild(iframe);
getAllVideos();
});
});
You can create object of wistia using
var wistiaObj = Wistia.api("<id_of_wistia_tag>");
After that you can call function,
wistiaObj.play();
wistiaObj.time();
you can refer this: https://wistia.com/support/developers/player-api
Hope it helps you.
I am creating a bookmark section for the video using jquery. This is currently static.
On click, I am appending link with the currentime in a div. You can then click on the appended links to play the video from that position (e.g. 5th second).
Currently, I am using click function inside click function which is not a good approach. If I remove the second function outside then it does not work as it is unable to find the value.
Could someone please suggest a better way to achieve this? I have created a fiddle link of the code.
Js Fiddle Link - https://jsfiddle.net/cp89db4u/1/
HTML
Bookmark
<div class="bookmarkList"></div>
JS
var myVid = document.getElementById('videoElement');
$('.getTime').on('click', function() {
var mycurrentTime = myVid.currentTime;
$(".bookmarkList").append("<a href='javascript:;' rel='" + mycurrentTime + "' class='bookmarkLink'>" + mycurrentTime + "sec How to get wealth?</a>");
$('.bookmarkList a').click(function(){
myVid.currentTime = $(this).attr('rel');
});
});
Change you Js as below.
var myVid = document.getElementById('videoElement');
$('.getTime').on('click', function() {
var mycurrentTime = myVid.currentTime;
$(".bookmarkList").append("<a href='javascript:;' rel='" + mycurrentTime + "' class='bookmarkLink'>" + mycurrentTime + "sec - Click to Play</a>");
});
$(document).on('click', ".bookmarkList a", function() {
myVid.currentTime = $(this).attr('rel');
myVid.play();
});
Hope this helps you
I'm new to jQuery and JS. How can I rewrite these functions correctly using jQuery? I know it's standard JS which was working fine with the manual HTML markup but I now also need to go through page and find iframes with YouTube src and take ID and then recreate them with the first example markup.
I'm totally stuck. I think I have it more or less, but not sure where to go to now.
Fiddle: https://jsfiddle.net/yurt5bb6/
First example uses my markup:
<div class="video-container">
<div class="video-player" data-id="Cv_2mp3X868"></div>
</div>
Which works as I need, however I think now I need to foreach on load and create that same markup from iframe embeds the functions should be better.
Attempt:
function createThumb(id) {
return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
function createIframe() {
var iframe = $("iframe");
iframe.attr("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
iframe.attr("frameborder", "0");
iframe.attr("id", "youtube-iframe");
this.parentNode.replaceChild(iframe, this);
}
$(document).ready(function() {
// build video from default markup
var defaultVideo = $(".video-player");
$(defaultVideo).each(function (index, value){
var p = $('<div></div>');
p.innerHTML = createThumb(v[n].dataset.id);
p.onclick = createIframe;
v[n].appendChild(p);
});
// search for social embeds and recreate to our markup
$('iframe[src*="youtube.com"]').each(function() {
var loadedVideoURL = $('iframe').attr('src').match(/[^/]*$/)[0];
console.log(loadedVideoURL);
});
});
I've tried to clean up the messy mix of native JS and jQuery and made some edits to your fiddle: https://jsfiddle.net/yurt5bb6/2/
Default function:
(function() {
$.each($('.video-player'), function() {
$(this).append(videoThumb($(this).data('id')));
$(this).on('click', videoIframe);
});
$.each($('iframe'), function() {
// Rebuild the given template
var player = $('<div class="video-player">');
// Strip youtube video id for data-id attribute
var id = $(this).attr('src');
id = id.substr(id.lastIndexOf("/")+1);
player.attr('data-id', id);
player.html(videoThumb(id));
player.on('click', videoIframe);
var videoContainer = $('<div class="video-container">');
videoContainer.append(player);
$(this).replaceWith(videoContainer);
});
})();
Iframe render function:
function videoIframe() {
var iframe = $('<iframe>');
iframe.attr("src", "//www.youtube.com/embed/" + $(this).attr('data-id') + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
iframe.attr("frameborder", "0");
iframe.addClass("youtube-iframe");
$(this).empty();
$(this).append(iframe);
}
Also changed the CSS, made a class instead of id for youtube-iframe.
also threw it up on jsbin: http://jsbin.com/ohazo/2
but the code on jsbin is the old code, so overlay_nextimg is overlay_content.click in the javascript on jsbin
Jquery lightbox, grab next link from the one we just clicked, take it's href, fade out the current image, and load in the next img.
Also, how would i go about keeping the overlay_content centered? when changing images, have it animate to the new position? i was gonna tackle that next, but i'm here so why not.
Jquery and Html, i've changed the overlay_content.click that we were using before to overlay_nextimg, to be less confusing.
Jquery:
$(function (){
$('a.lightbox').click(function() {
var imghref = $(this).attr("href");
loadImage(imghref);
alert(imghref)
return false;
});
$('.overlay_nextimg').click(function (){
var currlink = $("a[href='" + $(".overlay_content img").attr("src") + "']");
var nextlink = $(currlink).next(".lightbox");
var prevlink = $(currlink).prev(".lightbox");
alert(nextlink);
loadImage(nextlink);
});
$('.overlay_previmg').click(function (){
var currlink = $("a[href='" + $(".overlay_content img").attr("src") + "']");
var nextlink = $(currlink).next(".lightbox");
var prevlink = $(currlink).prev(".lightbox");
alert(prevlink);
loadImage(prevlink);
});
function loadImage(href, prevlink, nextlink) {
var currentImg = $('.overlay_content img');
var img = new Image();
var docHeight = $(document).height();
$('.overlay_content').delay(300).fadeIn(400);
$(".overlay_bg").height(docHeight).fadeIn(400, function(){
$(img).load(function () {
$(img).hide();
$('.overlay_content').html(img);
$(img).fadeIn('slow');
}).error(function () {
$('.overlay_content').html("you SUCK at Javascript")
}).attr('src', href);
})
}
$('.overlay_bg').click(function (){
$(this).fadeOut(300);
$(".overlay_content").fadeOut(300, function(){
$(this).html('');
});
});
});
HTML:
<div class="overlay_bg"></div>
<div class="overlay_content"></div>
<h1>links</h1>
Load a water color image.
Load a library book, yeah.
from the interweb.
internet image.
HUGE
Please add more of the code/HTML - Is $("overlay_content").click(...) the function you need to fix?
You can use the eq() selector to get the n-th a.lightbox on the page. But obviously you'll need to track what link you're currently on., i.e.
$("a.lightbox:eq(1)")
Or - using the src of the image currently being displayed, find out which link was clicked and move next from there, i.e.
$("a.lightbox[href='" + currentImg.attr("src") + "']").next()