Hi I am trying to build a gallery of videos on our website, and I have already done 90% of it, using the help from the following topic
Javascript Vimeo Gallery Basics
<div class="vimeo-container">
<iframe id="vplayer"
src="http://player.vimeo.com/video/.." frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div><!--vimeo-container-->
<div id="vplayer_title">
<p>INSERT VIMEO VIDEO TITLE HERE FOR EACH VIDEO<p>
</div><!--vplayer_title-->
<div class="bucketthumbs">
<a class="video-thumbnail" href="http://player.vimeo.com/video/.." video-uri="http://player.vimeo.com/video/..">
<div class="bucket">
<img class="gt_orrery" src="images/thumb_1.jpg">
<div class="title_bucket" id="thumb1_title">
<p>VIDEO TITLE HERE FOR THIS VIDEO<p>
</div><!--title_bucket-->
</div><!--bucket1-->
</a>
<a class="video-thumbnail" href="http://player.vimeo.com/video/.." video-uri="http://player.vimeo.com/video/..">
<div class="bucket">
<img class="gt_orrery" src="images/thumb_2.jpg">
<div class="title_bucket" id="thumb2_title">
<p>VIDEO TITLE HERE FOR THIS VIDEO<p>
</div><!--title_bucket-->
</div><!--bucket1-->
</a>
<a class="video-thumbnail" href="http://player.vimeo.com/video/.." video-uri="http://player.vimeo.com/video/..">
<div class="bucket">
<img class="gt_orrery" src="images/thumb_3.jpg">
<div class="title_bucket" id="thumb3_title">
<p>VIDEO TITLE HERE FOR THIS VIDEO<p>
</div><!--title_bucket-->
</div><!--bucket1-->
</a>
</div><!--bucketthumbs-->
This is my html. Using the above topic. I am successfully able to target the thumbnails to change the video in the iframe.
<script>
$(function() {
// Add an event listener to the click event for each of your thumbnails
$('.video-thumbnail').click(function(e) {
// changes src of the iframe to the one we stored in the clicked thumbnail
$('#vplayer').get(0).src = this.getAttribute('video-uri');
// stops default browser behaviour of loading a new page
e.preventDefault();
});
});
</script>
But I dont want to use the title that vimeo has on the video.
Instead I want to display it below the main video and have it change with the video, pulling the titles from vimeo.
I am only a front end developer and my knowledge of javascript and API is extremely limited. I tried to use the same code to get the titles to change too but since that uses src, and attribute i dont think i know how to make it work.
Could someone pls help!? :(
I believe Vimeo has oEmbed that can make it easier. But I cant really understand much of the API, its too basic for me, If its too complicated to solve this issue by using vimeo video titles, a second aleternative would be for me to manually enter the titles on the respect bucket divs, all i need to know is how to dynamically change the title in the main vplayer_title div
You might want to use the player's JS API: https://developer.vimeo.com/player/js-api
Something like this in your thumbnail click event:
var player = $f(iframe);
player.addEvent('ready', function() {
player.api('getVideoTitle', function(title) {
// set the title contents here
$('#vplayer_title').html('<p>' + title + '</p>');
});
});
Related
I'm trying to build a pure css text link to video slider, within our Umbraco CMS.
I have very little movement on code I write as TinyMCE WYSIWYG will strip the majority of code out.
What I have done is created a base CSS slider and tried many click actions and the only one that seems to work is a standard HREF. So for example:
<!-- YouTube video - there's a few of these 'item*' -->
<div class="item slide-in" id="item0"> <iframe src="https://www.youtube.com/embed/1Wh8RzcQZr4?feature=oembed" allowfullscreen="" width="410" height="231" frameborder="0"></iframe>
</div>
<!-- End YouTube video -->
<!-- The link to call the video 'item*' -->
Cat link one <br> <br> Cat link two
<!-- end link video 'item*' -->
The problem is that it has no option, but to work as a page anchor - which is really annoying me.
I'm not able to update anything else except the CMS interface. I've have capabilities to add JS in the head or footer of the document.
Visit the jsfiddle example
I can only add an onClick to an <a href... onclick=...>, but that still creates an on page anchor..
Any thoughts would be very much appriciated?
Switching an <iframe>'s src by an <a>nchor without any JavaScript is possible. Do the following:
Assign a name to <iframe>
Assign a target to <a> that value is name of <iframe>
Assign a href to <a> that value is the url of any valid youtube video.
Included suffix the url with autoplay=1 if you want video to launch once the button is clicked.
Styled the link to blend into a button, since anchors irritate you?
For some reason the videos aren't working in snippet, so for a live functioning example go to this PLUNKER
Demo
a {
text-decoration: none;
font-size:20px;
}
<button><a href="https://www.youtube.com/embed/RUlbTCjnX6E?ecver=1" target='yt'>1 Minute</a></button>
<button><a href="https://www.youtube.com/embed/1Wh8RzcQZr4?ecver=1" target='yt'>Cat Fails</a></button><br/>
<iframe name='yt' src="https://www.youtube.com/embed/1Wh8RzcQZr4?feature=oembed" allowfullscreen width="410" height="231" frameborder="0"></iframe>
I've been trying to find some good ways of fixing this, but with no avail.
I've got a profile website I'm working on that uses a carousel to show of some of my previous work.
One of the items of the carousel is a YT iFrame. The carousel has two main functionalities:
A next and a previous buttons to navigate the carousel and
An animation that gets triggered when you mouse over an item of the carousel; much like flipping a card it turns over and displays some details of the project.
The items in the carousel are mainly images, but I've also added a YT iFrame. The problem I'm facing is quite obvious; when you hover over the item containing the iFrame it starts the flip-animation.
So what I need to do is check when the video is being played and then disable the animation (preferably for that item only)...
Any advice on how I could do that?
This is a codepen taken straight from my local machine (hence the script references).
https://codepen.io/Todai/pen/GqGJxR
Some sample code:
<div class="item c">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<iframe width="250" height="200" src="https://www.youtube.com/embed/92i9TvuVtQc" frameborder="0" allowfullscreen></iframe>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
I think you should use IFrame player API. So you can embed a YouTube video player into your page and control player using JavaScript. The API will calls the onPlayerStateChange function when the player's state changed. And you will know when the video is playing and then remove the animation. You can see the following code below: The animation will add again until the video finish playing.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
stopAnimation();
done = true;
}else{
startAnimation();
done=false;
}
}
function stopAnimation() { $("#player").parent().parent().addClass('notransition');
} function startAnimation(){ $("#player").parent().parent().removeClass('notransition');
}
You will need the YouTube API for this, then use JS to detect if the video is playing and then only prevent flipping of the tile by ID.
I have several SoundCloud iframes in a div. I am looking to load them only when the div is being seen. Currently I am loading them through a method that I found online which loads them one by one but still doesn't really do me justice.
What I am looking to do is to lower the load time on the site when its loaded. Since SoundCloud slows the website down this should make it faster.
Something close to eager loading for iframes.
Here is what I have so far :
HTML
<div class="gallery-cell">
<div class="div-img-content">
<div class="soundcloud-wrapper" id="236517781"></div>
</div>
<div class="div-icon-name">
<img src="<?php bloginfo('template_url')?>/assets/gallery_content/icon-music.png" alt="">
Terryl E
</div>
</div>
JS
function loadSoundcloud () {
$(".soundcloud-wrapper").each(function() {
var URL = $(this).attr('id');
var htm = '<iframe width="100%" height="200px" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + URL +'&auto_play=false&hide_related=false&show_comments=false&show_user=false&show_reposts=false&visual=true" frameborder="0"></iframe>';
$(this).html(htm).fitVids().removeClass('.loading');
});
}
With the encouragement of Melvita, I went with lazysizes and dropped my load time by half!. It also reduced the the initial request from 400 to 48.
Thanks so much.
I'm working on a "latest videos" section for my website. I'm attempting to get it down on a test page before I move it to the homepage. I have an API call that grabs the info for my latest 3 uploads, and spits out their thumbnails. It also links the thumbnail to their appropriate video. What I want to do is then change the "Latest Videos" h1 tag to the title of the video when the thumbnail is moused over. How would I do that considering the following code? (I took out my playlist ID and API key from this example.)
<body>
<h1 id="mouse">Newest Videos</h1>
<div id="thumbnail">
<img id="thumb1" src="img/ajax-loader.gif" />
<img id="thumb2" src="img/ajax-loader.gif" />
<img id="thumb3" src="img/ajax-loader.gif" />
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=OnLoadCallback"></script>
<script>
$thumbnail = $('#thumbnail');
$.get('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=3&playlistId=+{PlaylistID}&key={MyAPIKEY}', function ( data ) {
$('#thumb1').attr('src', data.items[0].snippet.thumbnails.medium.url);
$('#link1').attr('href', 'https://youtube.com/watch?v='+data.items[0].snippet.resourceId.videoId);
$('#thumb2').attr('src', data.items[1].snippet.thumbnails.medium.url);
$('#link2').attr('href', 'https://youtube.com/watch?v='+data.items[1].snippet.resourceId.videoId);
$('#thumb3').attr('src', data.items[2].snippet.thumbnails.medium.url);
$('#link3').attr('href', 'https://youtube.com/watch?v='+data.items[2].snippet.resourceId.videoId);
});
</script>
If the title of each video is located at data.items[#].snippet.title, how would I replace the text of the h1 tag on thumbnail mouseover?
You could add something along these lines to your .get callback:
$('#link1').mouseover(function() { $('#mouse').text(data.items[0].snippet.title);});
and to revert back when the mouse moves off:
$('#link1').mouseout(function() { $('#mouse').text('Newest Videos');});
I am working with colorbox to display video's on a single page. The problem is that i need to share an url which directly opens the colorbox with the specific video.
I searched everywhere but i dont know where to start. Do i need to pass a hash at the end of the url which will tell colorbox with video it needs to open? And how do i generate/update the url when a specific video is clicked/watched?
Thanks!
The html below is in a foreach loop. So there will be multiple figures like this with the same a class.
<figure>
<a class="youtube" href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&wmode=transparent">
<img src="http://img.youtube.com/vi/VOJyrQa_WR4/mqdefault.jpg">
<span class="play"></span>
</a>
<figcaption>
<p>asdasd</p>
</figcaption>
</figure>
and the JS
$(".youtube").colorbox({iframe:true, innerWidth:853, innerHeight:670});
Nevermind, i already found the solution. For the people who dont know where to start, here is the code:
HTML
<a id="YOUR-VID-ID" class="YOUR-COLORBOX-CLASS" href="http://example-page-to-frame">
JS
var colorboxId =
(window.location.href.indexOf('video=')==-1) ?
false :
window.location.href.slice(window.location.href.indexOf('video=') + 'video='.length + 1).split('&')[0];
$(".YOUR-COLORBOX-CLASS").colorbox({iframe:true, innerWidth:853, innerHeight:670});
if(colorboxId!==false) {
$('#' + colorboxId).colorbox({open:true});
}
Your url to get the video
http://example.com?video=#id