I want to display an image as thumbnail and when you click on it the youtube video should play. I tried using the <video> tag but it does not support youtube videos hence couldn't set the image. I want to implement this in Reactjs. Can anyone suggest any solution to this?
<iframe
width='100%'
height='100%'
src=[youtube_video_link]
frameBorder='0'
allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
allowFullScreen
></iframe>
I guess you can use reactplayer package in your app to show any video with thumbnail.
Here it's available: link
Basic example:
<ReactPlayer
className=[any_class_name]
light={true}
url={url}
playing
/>
the light prop attaches video thumbnail to the video.
You may also set the thumbnail as any other image(of your choice) by simply replacing true with any image URL.
Related
i am trying to include a video into my html project, but when i run the code, the video doesnt work. what is the problem?
<video src="https://www.youtube.com/watch?v=rt-2cxAiPJk" controls width="400px"></video>
<video src="https://www.youtube.com/watch?v=5VYb3B1ETlk&t=1s" controls width="400px"></video>
<video src="https://www.youtube.com/watch?v=x_me3xsvDgk&t=1s" controls width="400px"></video>
I think the src is expecting to find a file on your machine, or possibly you can't play a video from a different domain. I'm not sure what the exact requirements are for src but it's probably a domain issue.
YouTube does provide embed code for videos and they use an iframe to make them work. I tested on my machine and with the iframe it works. For your first video it's
<iframe width="857" height="482"
src="https://www.youtube.com/embed/rt-2cxAiPJk"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
You can probably just copy that for every video and change the src.
You can right-click a video on YouTube to get the embed code.
I have my site so that people can upload urls of the videos to the database and with php it should in theory display said video. I don't want to use the embed tag because that doesn't work from mobile device. Is there a way to use the videos with just the url's?
<video controls>
<source src="https://www.youtube.com/watch?v=S3FPvI5p8Zo" type="video/mp4">
</video>
I expect the video to show, but the actual result is it not working.
One way to do this is by using a cover photo and a link to youtube.com
<a target="_blank" href="https://www.youtube.com/watch?v=S3FPvI5p8Zo">
<img src="images/cover-image.jpg">
</a>
Another is to use jquery and fancybox (http://fancyapps.com/fancybox/3/) and create a pop up:
HTML:
<a id="fancybox-vid"></a>
JavaScript:
$('#fancybox-vid').click(function(e){
e.preventDefault();
$.fancybox({
href: "https://www.youtube.com/embed/S3FPvI5p8Zo?autoplay=1",
type: "iframe",
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
});
Besides embed tag, there are two more ways to upload a video in HTML:
1. object tag
2. iframe tag
Do you try it out?
<object width="425" height="344" data="https://www.youtube.com/embed/F9Bo89m2f6g"></object>
<iframe width="425" height="344" src="https://www.youtube.com/embed/F9Bo89m2f6g" frameborder="0" allowfullscreen></iframe>
These urls are links to a page which hosts the youtube video, not a direct link to the media content itself. It's my understanding that the video controls attribute would be for content you either host yourself or remote content that is a direct link, since you're instructing the browser to play the content on your page directly from that source. I don't think there is a way to do what you're trying to do without use of an iframe. Unless you'd like your website to try to download the media from youtube, name it, store it, and present it.
Another way to do this is by using Iframe tag and a link to youtube.com
<iframe width="560" height="315" src="https://www.youtube.com/embed/S3FPvI5p8Zo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I got some youtube urls, such as https://www.youtube.com/embed/LaXGkW_-Nvc?list=RDTDDDvaoGiDg. When I put it to html video tag, it said "Invalid source".
How to solve this problem?
When I used iframe to display videos, I had another problem as described here: Video not showing in iframe on IE, but showing on firefox and chrome.
This is my HTML:
<video width="300" height="auto" autoplay="" controls="" name="media"><source src="https://www.youtube.com/embed/LaXGkW_-Nvc?list=RDTDDDvaoGiDg"></video>
You can't use the HTML5 video tag for youtube videos, it only supports files that are either MP4, WebM and Ogg. W3C Schools
Youtube already provides you with an "embed" function on their page which auto generates the iFrame for you. Youtube Embed There are a few other methods but they are no longer used (deprecated). Youtube API
As for the issue with IE, maybe have a look at this similar question: YouTube iframe embed code not working in IE
The only way around the issue if you want to use the HTML5 video tag is to download the Youtube video in one of the specified formats.
You need to use the <iframe> tag to embed the YouTube. Please read the code below:
<iframe src="https://www.youtube.com/embed/5L3wKniOnro?autoplay=1" width="600" height="400" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I have made a page full of embed videos from youtube and vimeo. And the load time is horrific! It makes my laptop completely freeze until they have all been properly loaded.
I have seen in another article that the way to do it is to keep the object or video tag out of the HTML and then add it after page has loaded. I have since been trying to work out how to do this but no luck!
I have also seen on other websites that they have a loading gif behind the tag until the video is fully.
Any advice on how to do either of these or another method would be great!
some embed video code:
<iframe src="http://player.vimeo.com/video/57564747" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
I would suggest to load them only on demand.
Put a dummy picture where a video will be. If the picture is clicked, load the content via jQuery or JS.
<div id='video-anchor'>
<img id='dummy' src='http://b.vimeocdn.com/ts/403/127/403127670_960.jpg' alt='' />
</div>
$('#dummy').click(function() {
$('#video-anchor').html(
'<iframe src="http://player.vimeo.com/video/57564747"
width="500"
height="281"
frameborder="0"
webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
');
});
You can get the images that vimeo uses. They are set as background-image for the div.vimeo_holder.
An alternative approach is to make your page full of thumbnail image screenshots of your various videos. And when someone clicks on a specific screenshot image, activate a pop-up window that displays that specific video. This puts less stress on your load time, and you can do this for a lot of videos within a given page.
I have taken the following iframe code for the youtube video from the youtube itself.
<iframe width=”560? height=”315? src=”http://www.youtube.com/embed/V3oJR5IAMxM” frameborder=”0? allowfullscreen></iframe>
But when i try to embed this video on simple web-page inside a div element. I can see the you-tube player in the web page.But the video is not loading in my webpage. But the same video is playing for me in youtube.
Can someone tell what might be the problem,..
Is the problem with a code or with the browser, i am using mozilla 13.
HiTbmBizz,
Try this instead,
<iframe width="640" height="360" src="http://www.youtube.com/embed/V3oJR5IAMxM?feature=player_embedded" frameborder="0" allowfullscreen></iframe>
Worked for me in HTMLSandbox if you want to test.
Let me know how it goes.