I am using Zurb's jQuery Reveal Modal plugin to create a pop-up box with a Vimeo video. However, the last video displays over the content as soon as the page loads and doesn't disappear, and the other videos do not disappear after hitting the close button on their respective modal window. The box and the other content within it will disappear, but the iframe for the video does not.
Here is the markup for the trigger and modal box:
<div class="videoEntry">
<h3>Community Involvement</h3>
<img class="videoThumb" src="images/community-video_thumb.jpg" />
<p>Corvalent Corporation CEO Ed Trevis talks about Chirofit's Corporate Wellness programs and Dr. Mo's involvement in the Cedar Park and Austin communities.</p>
<div id="modal4" class="reveal-modal">
<h1>Modal Title</h1>
<iframe src="//player.vimeo.com/video/74992379" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p>Chirofit and Community from Chirofit on Vimeo.</p>
<a class="close-reveal-modal">×</a>
</div>
</div>
The CSS and JS files have not been changed at all, and are included as they come. The reveal.css file is in the header and the jquery.reveal.js file is in the footer just below the call to the most recent version of jquery hosted on Google's CDN.
I'm at a loss about what could be causing this. I'm doing this for a friend and I'm starting to wonder whether his table-based site might be the problem. It often causes unexpected behavior. Any input with this would be tremendously appreciated.
The site can be viewed here, in case that helps.
There's a syntax error in jquery.reveal.js on line 118 (comma is missing) :
modal.css({'display' : 'none' 'visibility' : 'hidden', 'top' : topMeasure});
maybe this cause the problem?
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 have a problem with my YouTube iFrame: it becomes not clickable when I set margin (negative ones). And that is not what I want! I would like the visitor to be able to play the video on my website.
To add a bit more context, it is a Bootstrap website, and the video is in a timeline. I set negative margins, so that I do not lose space on the page. If I do not set margins, I get a left item - everything on the right is blank -, then after scrolling to the end of the first item, I get the second one on the right - but everything is blank on the left, and so on...
I tried to use relative and absolute positions, but it does not work in bootstrap timelines (every item crash together when I change it).
Do you have any idea or clue about this issue?
Here is what my HTML looks like:
<li style="margin-top: -140px">
<div class="timeline-badge"><i class="fa fa-gamepad" id="round"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Solitaire Android app</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> November 2016 - Work in Progress</small></p>
</div>
<div class="timeline-body">
<p style="margin-bottom: 10px;">This solitaire card game is an Android application, that tells the player when there is no more move to do.
This feature exists on iOS but not on Android, as far as I know.
So I wanted to do this to avoid the player to lose time in looking for a solution that does not exist.
You can play by dragging and dropping cards on the screen.
I plan to publish it on the Play Store! </p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A2nMAct2w88"></iframe>
</div>
<p style="margin-top: 10px;"><i>Technologies used: Java, Android</i></p>
</div>
</div>
</li>
And here is a link to my WIP-website, if it can help :)
http://horlogehumaine.net16.net/slegras/code.html
Are you talking about the small video in, say, "Solitaire Android App"?
If so, it's being relatively positioned among other relative/absolutely positioned things that are "covering" it.
Give .embed-responsive a z-index:1;
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>');
});
});
I'm trying to disable Foundation's Reveal animation, but it's still animating.
Here's my fiddle and code:
http://jsfiddle.net/ryanburnett/pSQjj/
<script>
$('#videoModal').reveal({
animation: 'none' //fade, fadeAndPop, none
});
</script>
Example Modal w/Video…
<div id="videoModal" class="reveal-modal large">
<h2>This modal has video</h2>
<div class="flex-video">
<iframe width="800" height="315" src="http://www.youtube.com/embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
</div>
<a class="close-reveal-modal">×</a>
</div>
Change your JavaScript call to the following:
$(document).foundation('reveal', {animation: 'none'});
Here's the jsFiddle: http://jsfiddle.net/pSQjj/1/
At least in this jsFiddle, it appears there may be a bug with closing the modal window with animation set to none, whereas it closes correctly if you change the configuration to fade or fadeAndPop. Let me know if you see the same bug in your app and I'll report it to the guys and gals at Zurb.
Change your JavaScript call to the following:
$(document).foundation('reveal', {animation: false});
The problem, is that if you turn the animation off, the modal does not animate to where you are on the page (if you have scrolled down the page) - so do take note of this.
I have this working code for IMAGES:
<a class="showimage" rel="http://www.sitename/images/image.png" >
<span>hover here</span>
</a>
plus some javascript and css code.... so the final result is now when you hover on "hover here" it shows the actual IMAGE "http://www.sitename/images/image.png" - something like this ( http://goo.gl/jhyNm )
What I want to ask is, is it possible to show/play .SWF file instead of image.... so the process is the same, I hover on "hover here" text and it shows the .SWF ?
Any help will be appreciated.
Thanks
I'm not 100% sure, but you can try to embed SWF in div element and using JS detect mouse over event on "hover here" and then show or hide div.
About "showing" the .swf file - it's pretty easy,
about "playing" it - I don't really know if it's possible just with js.
I guess you'll need some API involved. (an autoplay option if exists).
Anyway,html:
<a href='#' id='showMovieText'>
Hover Me
<div style='display:none'>
<!--EMBEDED SWF FILE HERE-->
<embed ....>
</div>
</a>
jQuery:
$('#showMovieText').hover(function(){
$(this).find("div").css('display','block');
});
Demo: http://jsfiddle.net/YbWgh/