We Keep Coding

A pure CSS text link to video slider

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>

Load SoundCloud Iframe when seen

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.

Vimeo Gallery - separate title div - to change dynamically

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>');
});
});

Java class gets loaded even if iframe is not called by clicking the link. Why?

I came across a strange problem . I have a jsp , which is calling an iframe . The iframe gets loaded with data from java.
Now to render the iframe i am using customized control-modal.js.
Now my iframe is coded after li tag like this :
<li>
<a id="modalLink" href="#myModal">Set up my Modal</a>
</li>
<div id="myModal" >
<div class="modalsubcol">
<p class="close"><img src="/.../close-button.gif" alt="Close"/></p>
<iframe id="modal-frame"style="display:none;" height="430"
width="675" src="<%= getTheModal()%>"></iframe>
</div>
</div>
And i call the modal in the head part of my jsp like this :
<script type="text/javascript">
window.onload=function modalOverride(){
var myModal;
$('modal-frame').style.display ='block';
myModal = new Control.Modal($('modalLink'), {
afterOpen : function(){$$('.close a').invoke('observe','click',function(e){Control.Modal.close(); Event.stop(e);});},
opacity: 0.3,
width: 675,
fade: true,
fadeDuration: 0.1,
autoOpenIfLinked: false
});
}
</script>
Now the link : Set up my Modal is part of a page containing many links. When i bring that page up, the java class that renders the data fro the modal also gets called. But this must happen only when , i click on the Set up my Modal link.
Before some one tells me , this issue is not due to
window.onload
event, i have used it as otherwise the modal does not get loaded when i click the a fore mentioned link. I have tried by removing the window.onload event as well. If i do that, the java class still gets loaded and now my iframe does not get loaded . No errors come up in fire bug as well.

When you drop this on the page:
<iframe id="modal-frame"style="display:none;" height="430" width="675" src="<%= getTheModal()%>"></iframe>
The source of the iframe is loaded regardless pf whether you have the display: none css property set.
Also note, JSPs do not "call" iframes, they simply render an iframe tag in the HTTP response, the browsers than interprets the iframes and renders the iframe src
If you wish to show/hide the iframe you can do so with JQuery:
$('.modal-frame').toggle();
If you truly wish to only include the other page when you click a link, you need to use AJAX to make a request when the link is clicked or load an iframe dynamically with Javascript.

Display the alt attribute under image on iframe html

I have this basic website that has multiple images and I want to display the 'alt' attributes under each image via javascript. I have tried a few ideas and I made it work. But my problem now is that I want this basic website to be loaded by another, a parent website, via 'iframe'.
So I have this line of code into the parent website
<iframe id="iframeID" name="iframeName" src="...my basic website" scrolling="auto" frameborder=0 width="100%" height="700"></iframe>
and it loads the basic website with the images. The website with the images has this kind of code:
<div id="gallery">
<div class="image-container">
<img src="imageOne.jpg" alt="An image of an elephant">
</div>
<div>...</div>
</div>
In the parent website, under
<script></script>
I have this code:
var gallery = document.getElementById('gallery');
var imageContainers = gallery.getElementsByClassName('image-container');
// Loop through the image containers:
for (var i = 0; i < imageContainers.length; i++) {
var image = imageContainers[i].getElementsByTagName('img')[0];
var caption = document.createElement('span');
caption.innerHTML = image.alt;
window.frames[0].document.getElementById('gallery').getElementsByClassName('image-container')[i].appendChild(caption);
}
and nothing happens.
When I have the exact same code but with a different end line in the 'script' of the basic website where the images are
imageContainers[i].appendChild(caption);
or
document.getElementById('gallery').getElementsByClassName('image-container')[i].appendChild(caption);
but without the
window.frames[0]
and I load that website via 'iframe' or just open it via its link, all works. I just can't seem to make the 'alt' attributes or any text to display in the 'iframe' HTML from the parent website. I can change the style of the iframe HTML but cannot add text into a 'div' or 'span' or anything. And I do not understand why.
If you could help it would be great.
Thank you.
p.s: I need the basic website to be loaded by the parent website via 'iframe'; the javascript that displays the 'alt' attributes has to be in the parent website, not in the one that is being loaded
p.s.2: both websites are in the same domain and both are mine