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>
Related
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 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?
Here is my reference page: http://ca.pockethm.com/setupaccount/feature-videos_library.php
I am using Dynamic Drive's "Dynamic Ajax" script to change the content in a 'containerarea' div. Here is a sample of my actual anchor code:
<a href="javascript:ajaxpage('videos-maintenance/appliances-repair_fridge_gasket.php', 'contentarea');">
<img src="http://aaaa.pockethm.com/images/icon-youtubeTV.png" alt="Repair a Refrigerator Door Gasket" class="icon-image" border="0" />
<div class="icon-text">Repair a Refrigerator Door Gasket</div>
</a>
What I need is to have the page jump to an <a name="videoTop"> anchor positioned above the video window upon clicking the YouTube icon to watch a particular video in preparation for when I add a lot more videos. I've tried onclick, onfocus, onmouseover, and a variety of other code mashes....to no avail. There's a strong possibility I'm doing it wrong, though.
Thanks in advance for the assist.
You need to stack it in the inline code:
<a href="javascript:document.location.hash='#videoTop';ajaxpage('videos-maintenance/appliances-repair_fridge_gasket.php', 'contentarea');">
I want to add video into my website. But I want to play that video within pop up window when user click on image. How can I do that.??
I want to create that look like this website.
https://www.shoplocket.com/
Thanxx :)
You could use colorbox
see here for example
Well first of all you should know what kind of popup you want. Just a new screen or a nice effect like the website you provided.
In the last case you could look at some popular popup possibilities like lightbox, fancybox,...
Depending on the plugin you choose, you'll have to check their documentation to embed video's.
Good luck!
Use PrettyPhoto.
Check out the Vimeo Content in it.
To open Vimeo content with it simply:
Create a link ().
Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
Change the href of your link so it points to the Vimeo video page, the same link you would share with friends.
Code:
<img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" />
To play a video put it as content of a popup
<video id="videoPop" class="video" controls >
<source src="adress">
</video>
This is popup itself:
HTML:
<div class="popup" onclick="myFunction()">Click me!
<span class="popuptext" id="myPopup">Popup text...</span>
</div>
JS:
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show');
}
</script>
When I write this the website you mentioned does not work, so I live CSS for you.
No you need HTML trigger:
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
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/