CODEWITHSUNDEEP
htmlvideo
Allison Cairns
Allison Cairns

Reputation: 301

How to I insert a video link within an image file

How do I link a video (hosted on a server) to an image? I keep getting the first frame of the video instead of a specific image that I want to display. I also need to get the video to play in the right size on multiple devices. At the moment I can set the height and width but this doesn't adapt to mobiles.

Example:

<p><a href="THIS IS THE VIDEO FILE I WANT TO LINK"><img src="/resources/Pictures/Website%20Pages/Members/Club%20TV/Summer%20Camp%20Nutrition.jpg" border="0" alt=""></a><br></p>

Upvotes: 0

Views: 1170

Answers (1)

Fareed Khan
Fareed Khan

Reputation: 2923

You can use controls poster property in order to give your video a poster instead of showing the first frame

CSS property object-fit to fill the poster based on width and height of the video 

video{
   object-fit: inherit;
}
<video width="400px" height=200px" controls poster="https://images.unsplash.com/photo-1590573124389-83f2133e0307?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
   <source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4">
   <source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg" type="video/ogg">
 </video>

Upvotes: 2

Related Questions