How to display/add play button on youtube image? - youtube

I have embedded the youtube image from youtube server which is "http://img.youtube.com/vi/0.jpg", now there is no play button shows up on middle of the image as we see usually any youtube videos!
I tried to use the following code to get an image on top of the youtube image but it shows bigger picture, i know why
<a class="fancybox" href="#video">
<img src="/wp-content/themes/mytheme/images/play_button.png" no-repeat width: 0px height:0px; style="background: url(http://img.youtube.com/vi/<?php echo $youtubeid ; ?>/0.jpg) transparent" width="180" height="150"/>
<div id ="video">
// here is my embedded youtube usual code
</div>
both images shown in 180 x 150 size, but thats not what i want.
I want youtube image will be shown in 180 x 150 size and play button image (play_button.png) will be display in middle of the youtube image in small size.
Any clue in css or coding in php will be great favour.

I sorted out quite easily. Just create an image with play button middle and make the surround transparent and then I put this image on top of the youtube thumbnail image. it worked, but video image gets realigned, but it does not look bad though.
<a class="fancybox" href="#bizgenevideo">
<img src="/wp-content/themes/mytheme/images/play-button.png" style="background: url(http://img.youtube.com/vi/<?php echo $youtubeid ; ?>/0.jpg) " width="180" height="148"/>

You can also use a web service
the halgatewood service was taken down, guess too many people bombarded him :)
now it is on github
https://halgatewood.com/easily-add-play-buttons-to-youtube-video-thumbnails/
https://github.com/halgatewood/youtube-thumbnail-enhancer
Here is another service that does the same thing (as suggested by muktesh patel):
http://www.giikers.com/iwc
old answer:
http://halgatewood.com/youtube/
Like this:
http://halgatewood.com/youtube/i/youtube_id.jpg
For example:
http://halgatewood.com/youtube/i/aIgY20n3n0Y.jpg
Related question: How to overlay a play button over a YouTube thumbnail image

Related

is there a limit of video elements in an html page on ios10 safari

I have a html page which is use to display gifs. I want to optimize it by converting those gifs to video. I make them muted , set 'displayinline' and 'autoplay'.
I tested it on an iphone with ios 10 safari;
But it is strange that when the number of videos is large than 16(maybe) , some of them (at a random position) will become an empty square. I set every video with the same 'src' value , not thing changed.
So, I wonder is there a limit of videos in a html page in ios safari?
<html>
<body>
<style>
video{
width:100%;
margin-bottom: 20px;
}
</style>
<p>
<video src="http://dev.mediapool.fi/demot/iosvideo/puuvideo.mp4" muted loop playsinline autoplay></video>
</p>
<p>
<video src="http://dev.mediapool.fi/demot/iosvideo/puuvideo.mp4" muted loop playsinline autoplay></video>
</p>
<!--....same video repeat 20 times -->
</body>
</html>
This is very old; however, the short answer is "yes, there is a limit."
It totally depends on some combination of your device, your ios version and magic, but you cannot add more than x videos to a single page in ios. the first x videos will load just fine; subsequent videos added to the page will never get a readyState past 0, and will never load, and will never play. I've seen x as low as 4 elements and as high as 16 elements.
I wish I could be more specific with you about the number of video elements, or even the why (we can assume why but there is no official answer).
Playing videos is a CPU intensive task, and also will use memory, as Mohammad notes, and network bandwidth.
Many devices will have hardware support for video playback to help speed it up and reduce processing and battery usage. However, this will generally not be designed to support many videos playing at the same time.
Most devices will demonstrate some issues with the type of test page you are describing - the symptoms may be different on different browsers and different machines, but pretty much all are going to struggle to play this many videos simultaneously.
A typical approach to this type of page, although it may not meet your needs, is to have thumbnails for all the videos and to start playing them when one is selected or hovered over.

SVG does not display correctly, iOS Safari

I was supplied a logo for a website in .ai format, which I cropped and saved as SVG1.1, and placed this on multiple places on a friend's Shopify store.
Image in question (view this in Safari for iOS)
Screenshot of the image fault on the site: i.stack.imgur.com/HmsIB.png
Link to actual page here: bambooboss.com/pages/about-us
The "Panda Head" image under the first photo is half blacked out when viewed with Safari, latest version of iOS on my iPhone 5. While it looks quite cool, it's definitely not anything like my friend's original creative vision...
I tried another answer here on SO, where they tried surrounding all LinearGradient with <defs> tags, which I did to the current image - but to no avail...
Anyone have a clue what's going on? Is it compatibility? or did something go wrong while saving to SVG from .ai?
Change the following line to:
.st38{opacity:.08;fill:url(#XMLID_108_);}
i.e. remove the 8.00000e-02
also ... run this through an optimiser like SVGOMG ... if displayed at the small size this is far too complicated and large. Simplify all the gradients, maybe even merge them all into one. Should be able to get the ungzipped version down an order of magnitude from 35kb. Lovely logo though.

How to expand video cropping frame like native application?

I have issue with cropping video and also need to expand video
cropping frame like native application, whenever User tapped on
cropping fame I need to expand video frames(thumbnails) and also want
to crop it, but I don't understand how to do it.
Here's a link to an open source control that you can use as a foundation.
https://github.com/andrei200287/SAVideoRangeSlider
This control already generates thumbnails from the source video and draws a linear trim bar with draggable handles that let you set the start/end point of the video. All you'd need to do is add some code to reload the trim bar with detailed images from around the time of the handle that's being dragged at the moment.
This control also comes with a sample app that exports the trimmed video from the selected start and end points.
Hopefully that's what you're looking for.

Replace YouTube Error Thumbnail with My Own

I have a unique challenge. We have lists of YouTube videos that members have posted and they are shown on a page that shows all the thumbnails. However, sometimes these videos become unavailable or deleted and the thumbnail changes to a grey box with 3 dots. How can I replace this image, with an image of my own making.
Here is an example: http://www.storeboard.com/videos/music/ look for the video entitled "The Six Teens", it is showing with the greyed out image and three dots.
Any assistance would be greatly appreciated.
Many Thanks.
If you look at the picture there is a prefix #at=24
http://i1.ytimg.com/vi/vkAusm1SM7I#at=24/hqdefault.jpg
http://i1.ytimg.com/vi/vkAusm1SM7I/hqdefault.jpg
When fetching with the gdata API just detect if #at=24 is availible and then replace the thumb.

Get img thumbnails from liveleak?

I want to get a thumbnail image for videos from liveleak.com.
When getting images from Youtube I just do like this:
http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg
Any idea how to do for liveleak.com?
Unfortunately, there does not appear to be an easily standardized URL like youtube has, but if you can make a call to the video page, you can scrape out the image fairly easily. There's a <script> tag on the page that makes a call to a jwplayer function. This function is initialized with an object that has an image property. You can use this value as the thumbnail.
It will still require scraping the page bu the meta og:image tag in the header also points to the thumbnail image.

Resources