[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

how to resize videos as on page like Facebook

Posted on 2011-05-08
8
Medium Priority
?
291 Views
Last Modified: 2012-06-21
Hey All,

I have something similar to the Facebook wall and I want for each YouTube video that gets posted to be displayed as a Thumbnail image and when clicked to expand out to 400px wide by 100% height, like Facebook.

Any ideas on code to get me started with this?

Thanks in Advance,
0
Comment
Question by:piixeldesigns
  • 4
  • 2
7 Comments
 
LVL 14

Expert Comment

by:EMB01
ID: 35720623
You could do this with jquery.  Try using this plugin for images which you could probably use for vids, too:

http://plugins.jquery.com/plugin-tags/image-resize

To do the thumbnail, though, you'll have to have a separate graphic, which, when clicked, would display and scale the flash video.
0
 
LVL 14

Expert Comment

by:EMB01
ID: 35720652
Moreover, you could just use a lightbox (http://www.huddletogether.com/projects/lightbox/) and then set the properties of the video to 100% of the container like this:

http://stackoverflow.com/questions/2160363/dynamically-resizing-an-embeded-video-with-jquery
0
 
LVL 1

Author Comment

by:piixeldesigns
ID: 37045316
I've requested that this question be deleted for the following reason:

None of these were what I was after and are not relevant to the question. I took a different approach in the end. Please delete this question
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 111

Expert Comment

by:Ray Paseur
ID: 37042474
What approach did you take?  Please share so we can learn from the way you solved the problem, thanks.
0
 
LVL 1

Accepted Solution

by:
piixeldesigns earned 2000 total points
ID: 37042494
Here is the code I used

<script type="text/javascript">
        								
        								function adjust(vid) {
											vid.css({ "width":"480px", "height":"390px" });
										}
										
										$("#trackObject_<?php echo $divNum; ?>").live("click", function() {
          									adjust( $(this) );
										});
									</script>

Open in new window


I have other php code above this which basically sources the videos from different video services.
0
 
LVL 14

Expert Comment

by:EMB01
ID: 37045317
...  That's exactly what I said to do:  Use jquery to resize the video...  I even provided a plugin.
0
 
LVL 14

Expert Comment

by:EMB01
ID: 37082356
Look at this code:
function adjust(vid) {
											vid.css({ "width":"480px", "height":"390px" });
										}

Open in new window

That resizes the video using jquery...  which is precisely what I said to do.  Had he asked how, I would have shown him...  
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This holiday season, we’re giving away the gift of knowledge—tech knowledge, that is. Keep reading to see what hacks, tips, and trends we have wrapped and waiting for you under the tree.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question