I have a page with a series of links to YouTube videos that display in a lightbox when clicked. I'm using prettyPhoto.
On the lightbox are share links - Facebook, Twitter, and such. Unfortunately the default behaviour of these share links is to share the whole page - I want to share the URL of the YouTube video specifically.
The HTML output is customisable, as a variable in the prettyPhoto JS, so I think what I need to do is take the URL you've just clicked on (which obviously PP knows, because it can play the video) and stick it in the share link.
I'm not great at JS, so hopefully this is a relatively simple thing! I'm even hoping PP has a variable somewhere in the code already that stores this info, and I can somehow just add it into the HTML variable... but don't know how!
Thanks :)
Related
I may be asking this incorrectly. I'm not super familiar with the terminology of javascript or ajax. I've been able to get by just enough using html and javascript code from highslidejs to create most of our companies in-house web pages. Now I am stuck on how to go about this issue. Originally I built this page using simply html code. Then one of the higher ups requested that I use this template. :( So I am attempting to work with this template that has no functionality what so ever. Everything was going ok until I came to having to reveal the video content below each selection using the ajax code that I grabbed from hsjs. While I got it to show the videos onclick with each submenu item.. the problem is that the way the template is built it has each video positioned just under it's name when it is clicked. And it doesn't clear the previous video being played. I was thinking that I could have each video be targeted to play in a specific div with an iframe. That way each video will play in that same div and override the previous one selected thereby avoiding having several open at the same time. I have had that work before. However, I am running into a conflict with the href having two functions: "javascript:;" and "mymoviesource.mp4"
I apologize for the lengthy explanation of my problem. Here is my work in progress: http://www.foxsportsgraphics.com/Lab-presentation/index-6-7a.html
I'm currently only working with the first "Virtual Reality" menu tab. I had each movie opening in a separate web window but they would like for each to open as the first one does for "Big East Basketball (jeep)" in that same position. Here is my first web page that I used a target iframe to play each video in:
http://www.foxsportsgraphics.com/template/index-Lab-original.html It works great having each video play in the same spot. But I don't know how to have one href do both: javascript code to reveal the iframe below the selections and target the video URL's to play in the iframe . Would it be better to use an "onclick" behavior to reveal the iframe? And if so.. how would i get the positions of the iframe to be in the same place for each selection? Again, I apologize if this question is troublesome because of my lack of knowledge in this area. But I would so greatly appreciate any help at all to direct me in some way to be able to accomplish what I want to do. Thank you in advance!
I want to add a button on the embedded youtube video on my website. So that a user can easily download that video. Now I just need to display a button on youtube video surface ,so that a user can click the button and do some job (about the video). Button will be like this:
Click Here to see
with simple html or javascript. Thank You.
Adding a button on top of your iframe is the simple part of the solution, and you will likely find this solution helpful. to match the styling, I'd recommend a site like http://css3buttongenerator.com/
As for the second part of this question, it is more advanced to write javascript to download a video, and if you'd like to avoid that, a simpler solution would be to redirect a user to a site like this. you could even go through the steps of downloading the video, and get the final link the site provides when it is ready to download.
I am trying to do something like this:
A user share the url to my page which has a small javascript based lets-say-a-game.
The shared content will display a static image and a play button inside the widget/thumbnail.
When the user clicks on the play button, I want to load the page within the shared widget inside an iframe
For example: When a souncloud page is shared, it shows the music thumbnail and a play button. When I click on the play button it displays a javascript based music player inside the share widget loaded inside an iframe. To my understanding, the trick is to use a video content as a wrapper of some sort i.e swf but couldnt figure it out exactly how to do it.
Any help towards the right direction is appreciated.
Thanks in advance!
I think Facebook will not allow you to post any script. Rather you can post links and if the user clicks on that link they will be redirected and there you can implement your code..
I have a popup layer on my website that show the latest news on it. Now I want to embed a YouTube video on it, that plays once the user open the website. And I would like it to stop playing after the user close the popup page. I have tried SoundCloud player and it stops when I close it.
Here is the live link.
You can also download the file source file on here (.zip):
Source Files
So I want to make the video stops playing when the user closes the popup page.
Any idea?
Thanks in advance.
Friend's
Don't try to close the facebox/fancybox pop up window. Try to create a container that holds the video file/embed code. After clicking on Close link, just remove the HTML of that embed/video file container.
Ex. <div id="myVideoFilePlay">Video File/Embed Data</div>
Script File:
document.getElementById('remodeVideoPlayer').innerHTML ="";
After that close the fancy box
Here is some information about the auto-play feature for embedding in YouTube.
http://support.google.com/youtube/bin/answer.py?hl=en&answer=1181821
"To make it autoplay, just put &autoplay=1 after the video ID so it looks like this:"
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/XXXXXXX&autoplay=1"></param>
<embed src="http://www.youtube.com/v/XXXXXXX&autoplay=1" type="application/x-shockwave-flash" width="425" height="350">
</embed></object>
As for stopping the video, I advise you have a look here and set up some simple functions to do the pausing upon clicking "X". See: How to pause a YouTube player when hiding the iframe?
EDIT: Added more info..
I can see you set your jQuery to #dialogjj upon the site loading, and then the HTML is inside of the div so setting it to display:none; it wont stop it playing. I have an idea to make it work - there may be a better one out there with nicer jQuery but this works fine. I feel that no one is going to reply further due to the way the question was asked/not very easy to look into unfortunately. That is perhaps why you got a downvote on this question, have a look how other people ask questions here for future guide, its generally not just giving links to your website expecting people to look, instead try to pin point your problem adn what you have tried so other people can have a clue about it, but we all start somewhere so dont worry :).
My idea is that you actually set the contents FOR #dialogjj with jQuery (so the embed code is put in via the JS file and not the HTML page) and in that same way you can actually append it to get rid of that embed code. I have set up a simple JSfiddle that does this in the same fashion as you want. Its up to you to merge it into your code though :)
JS FIddle link http://jsfiddle.net/ivandude/vLrvA/2/
If you like the solution please click tick as the answer :D my first one maybe.. haha
The answer was really easy. When I used the old object embed code, it just worked. Thanks for the suggested solution but it works for iframe. But does not need any additional code.
I have lots of mp3s on my site that I want my friends to be able to play only- but I don't want them all downloading as soon as the page opens and would prefer them to only start downloading into the buffer if someone wants to play it- is this possible with the embed tag? I can't seem to find anything on Google so I am wondering if it's something I'll have to do in JavaScript or think of an HTML work around.
cheers
You can use javascript to construct the embeds and insert them into the DOM when a user clicks a button or something similar.
You will want to use the Object tag vs. the Embed tag for one, but that said, don't set the auto-play option and they won't load until requested.
If you want a really simple fix - don't embed the music files just have links to them. Then a user won't have the file download until they click on them (this is what blog.stackoverflow.com does for the podcasts...).
If you have time on your hands you can go for my solution... I created a separate html page for each song and used the embed tag on each. Then I just created links to the pages to open in a new window. I know... hack! But it works well, and the other related links go along with it in the new window for each song.
You could always try out Yahoo Media Player,
You just make link to the mp3s and they can play them at their own pace.
I have seen this used for PodCasts, and Playlists of Mp3s its very handy and free.
http://mediaplayer.yahoo.com/
First link
Second link
Third link
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Simple :)
You can even add album art and manipulate the order the mp3s are added to the playlist thru simple html.
http://yahoomediaplayer.wikia.com/wiki/How_to_link