How create a frame for our video? - iframe

I have a video which I want users to see in my webpage. I have uploaded that video on youtube also.
My current coding is
<iframe src="https://www.youtube.com/embed/ilbR0MiH6Ho"></iframe>
But this shows the video in the style(with same loaders, buttons, interface, etc..) it is being shown at youtube...
But I want it to be shown in other style like it is shown in some other sites like http://www.apple.com/your-verse/#video-your-verse It has a different style of viewing videos!!
That way, I also want to create my own frame to view my video(with a play button of my designing, my loading bar, my interface, etc..)
Can anyone out there help me with that?? Thanks in advance...

if you need your own 'player' or 'skin', you will have to use the available players like "JWPlayer" or "flowplayer" or create your own. Then you will have to host your videos elsewhere, where a streaming link has to be obtained.
Its not easy unless you have the technical skills required to create your own video player. But you can use the existing opensource players like I mentioned before.

Related

how to show google that a video on my site is a duplicate

(newbie=me) On my wordpress website I have video1 and I want to put it in two places on the website because it makes sense from a users perspective.
Video1 is embeded using html5; its and seo embed from Wistia. I want to put copy_video1 on a different page with text that is also different and useful. The thumbnail/frame-of-video used for copy_video1 is different than video1 making it more relevant to its page.
I thought I would use an iframe for copy_video1 since I had read google doesn't index iframes?. I thought to go the extra mile and use best practices that I should use canonical in the iframe to point to video1. Is this correct? What does the syntax look like for an iframe and video with canonical in it?
Is this the same method I would use for the video if an external site wanted to embed my video?
I guess this is also and seo question, but mostly to code it correctly for indexing.
THis is for a small non-profit site...
Thanks for you help!
I cannot think of many instances where you would have to duplicate a video on the same website, so my recommendation is to just have one and use HTML5's poster attribute. You would just set it to a different image on the other page. This should work, should replace your first line of the :
<video controls poster="/images/othervideo1.jpg">

Synchronise 2 youtube videos on Drupal site

I want to allow 1 user to point to a youtube video (possibly upload it through the youtube api) on a Drupal site.
And then other users can add videos linked to that video (separate nodes?).
The difficulty is that the videos should be synchronised. So when a user uploads a video to match the original one, he should be able to somehow indicate how this is synchronised with the original one. For instance 4seconds vid1 = 1second vid2
Any ideas, module suggestions, UI ideas are very much appreciated.
I have found this post on video synchronisation with youtube api, but I need a method that would allow the user to actually easily give in the synchronisation. And then synchronise with different starting times.
Best to create a custom module for that. Give the user a form with the youtube id and a sync time then use the youtube api from there. No need for drupal specific code - tho you could create seperate nodes for each video, relate them with node reference fields and store any data in the variables table - butI'd probably create my own table for this.

Picture or photo viewer on my Web site

Lets say I let the customer upload up to 5 pictures. I'm looking for a good way to let visitors see the images one by one.
I've seen some.. where there are thumbnails on the side/bottom (that looks like a vertical/horizontal film strip) and the default picture is the large one displayed. And viewers can click into others to show those pictures.
This could possibly be an AJAX solution. I just couldn't come up with the right keywords to Google this custom Web component. Perhaps it is "photo gallery". But I would be more interested to know what solutions developers here use for their site.
Perhaps lightbox is the keyword you're looking for: http://www.google.com/search?q=lightbox
Is something like this Galleria what you're after?
It's all implemented in Javascript so is simple to integrate.
There are several options but on first thought, I would reach for the fancybox jQuery plugin. The third example on their home page does exactly what you described. I've used this plugin a few times now and it's quite good.

How to add Facebook Like button to a Flex app?

I am working on a Flex AS3 application and wanted to add the Facebook Like button inside the app. I am unable to find any API or anything apart from the http://developers.facebook.com/docs/reference/plugins/like code generator.
Any ideas on how this might be accomplished? I am quite new to the recent changes in the Facebook Platform, so any info would be appreciated.
A direct "like" button should not be possible, since Facebook needs to sandbox the whole thing. Both like button formats (iframe and xfbml) use a sandboxed iframe, so nobody but facebook can set "likes" or know anything about the user.
For that to work with Flash, I think facebook would have to provide the button itself as a SWF file so you can load it in Flash. Then it can create a sandbox within itself and thus load the user information safely. Very much like the Chromeless Youtube Player, where it's almost impossible for Flash to access the actual FLV URL (even through introspection).
But even so, I don't think this would provide enough security... realize that you are dealing with very private user information and credentials here.
The only way I know you can "like" stuff through Flash is first doing the whole Facebook Connect thing (several popup windows asking the user for permissions) and then using the API of your choice to do the actual "liking", for instance, with the Graph API:
http://developers.facebook.com/docs/api#publishing
The closest information I could find are these 2 items so far. Hope it helps you in your journey.
Facebook Developer Site: Source
Facebook like button in flash
I hate answering "no" to a question because what I really mean is "I don't know and I can't find a way". I'm sure your Google-fu is as good as mine. All I can see are Facebook forum posts like this where people are asking the same question and no one is answering.
The examples they give of the like button are either embedded in iFrames or using XFBML <fb:like ../> tag. There are no examples of how to like something using their new graph api or either of their old APIs (FQL and REST API).
I had to get a Facebook like button in a html page (looked like a header on the top) and get the swf embedded below. As its a complete flex app in my case, this work around was possible and plausible

Capture screenshot of website on the client (Javascript or flash)

Is there some method to issue a screen capture(browser window content only) from the browser with javascript or a embedded flash object etc so that a full quality image of the page content be saved or printed or an alternative approach.
I have a web app (asp.net 3.5) with google maps and other ajax operations client side like a custom tile server. I have been trying to implement a way for the user to print good quality captures of the webpage.
I have used the basic Window.Print() but in both IE and FF there many artifacts within the google maps and some items such as the popped up bubble doesnt print. I have experimented with save pdf thru cutepdf(just to post an example here) and the quality thru window.print() is low too.
For example, A screenshot with FireShot addon is perfect and what I want the client to have. however that is FF only and I cant ask the clients to install addons/activex controls on their browsers.
Have a look at this download example zip file(4mb) with:
Example screen shot using FireShot
(example of what I want to achieve
thru a html/JS button with in the
page)
Firefox Window.Print() result
(cutepdf used to save as pdf)
IE Window.Print() result (cutepdf
used to save as pdf)
note in 2,3 the little bubble is not printed even when open.
For now, I have added the function on my site to go fullscreen and guide the user to take a screenshot or call the window.print() function.
I am still looking for a method to print/capture my page.
are there any flash/activex controls that I can include in my page and thru them provide a quality print mechanism?
Thanks again for all the help but I still need more. :)
Thank you in advance.
http://rapidshare.com/files/311849636/Print_examples.zip.html
You'll go to all that work only to find that a simple app like Snagit will do the job. Building a SnagIt Screen Capture Plugin
The only way to reliably provide a high-quality print version of whats on-screen in a rich web application is to use the client-side, say JavaScript, to send the server precise information about the current state (where bubbles are, etc.) and use that to generate an image that mimics the positioning. Convert that image to a PDF or what-have-you, then send to the client for download.
Google also has a Static Maps API that might give you good results. I looked into it myself once, and only didn't go with it since (at the time) there were limitations on how many points they could support in a polyline.
I don't think this is possible. It would be quite a security risk to be able to capture the user's screen through scripting (imagine bad sites capturing screen information).
No there is not, though it would come in quite handy at times for bug reporting etcetera.
You will probably get the best result by creating a separate version of the page as a PDF have that being generated. It's no quick fix by all means, but you'll get superb print quality and total control over everything. The map part will probably be a bit tricky though as you need to get the map as a bitmap on the server somehow, and if it's not in flash on the client I don't know how you'd do that.

Resources