I am unable to create thumbnail of video - javascript

I have an iframe on my website.I want to create a thumbnail of the video
I have url of iframe stored in database.I want to create a thumbnail of the video
I tried this code.
<img src="http://img.youtube.com/vi/_uQrJ0TkZlc/hqdefault.jpg" alt="" style="height:61px">
It's working perfectly but the problem is that the id which i used which is(_uQrJ0TkZlc)this it is static.I want that id should be dynamic which is there in my database table
This is my iframe
<iframe style="width:10px;height:10px;" id="<?php echo $fetchorderdetails['id']?>" src="<?php echo $fetchorderdetails['video_links']?>rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Instead of storing the entire link to the embedded video, only store the ID. This way you can both access the embedded video as well as the thumbnail link. To insert a variable in to a string use "<img src="http://img.youtube.com/vi/" . $id . "/hqdefault.jpg" alt="" style="height:61px">". See https://www.php.net/manual/en/language.operators.string.php

You should use the "embed" version of the video url, with the embed word in it
<iframe width="200" height="150" src="https://www.youtube.com/embed/iqlp5g8-W3I" frameborder="0" allowfullscreen></iframe>
The non embeded url dont work in an iframe

Related

How to disable loop on embeded video from vimeo

I'm trying to perform an action on the 'ended' event on my embeded vimeo clip. This is not firing because, according to vimeo documentation, video is on loop. So I tried adding loop=0 to the url but it doesn't seem to be doing anything.
<body>
<iframe src="https://player.vimeo.com/video/717499153?muted=1&controls=0&autoplay=1&loop=0" width="240" height="320" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" title="video" data-ready="true"></iframe>
</body>
Is that some sort of rule for autoplayed embeds? How can I force it to play just once?
You have to add also background=1 as documented here :
https://developer.vimeo.com/api/oembed/videos
background - false -
For videos on a Vimeo Plus account or higher: whether to hide all video controls, loop the video automatically, enable autoplay, and mute the video. The loop and autoplay behaviors can't be overridden, but the mute behavior can be; see the muted argument below.
This is the correct URL :
<iframe src="https://player.vimeo.com/video/717499153?muted=1&controls=0&autoplay=1&background=1&loop=0" width="240" height="320" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" title="video" data-ready="true"></iframe>
I do recommend next time to contact Vimeo Support to help with this,
Have a nice day

How to make the YouTube Embed consistent?

I noticed that the interface of the YouTube Embed's controls change as per view.
Here is how it looks in mobile view:
and Here's how its controls look in normal view:
I want the controls to look the same ( I want the first video's controls to look like the second one ).
Any help would be highly appreciated.
Here is the HTML for that video:
<iframe width="100%" height="232px" src="https://www.youtube-nocookie.com/embed/6kAvCSMkYEI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Play first youtube embedded video from a list of link using jQuery

I am calling a loop to generate a list of link of youtube embedded video. When I click on any of the links, the related video is opened in iFrame. But the problem is, when I first load the page, it does not shows any video in an iFrame nor even the iFrame. I need to click on a link to load a video. I want to load the first video of the list automatically when I load the page.
iFrame of the video:
<h4 id="videoTitle"></h4>
<div class="embed-responsive embed-responsive-16by9">
<iframe id="frame" name="frame" width="560" height="315" src="about:blank" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
This is the loop to generate list of videos, I am using laravel, so this is how the code looks like:
#foreach($topic->videos as $video)
<li>
Play Video
</li>
#endforeach
Here is my jQuery code:
<script>
$('.ytLink').on('click', function (e) {
$('#frame')[0].src = $(this).attr('href') + '?autoplay=1';
e.preventDefault();
$('#videoTitle').text($(this).text());
});
</script>
Can anyone help me how to load the first video automatically?
I triggered a click on your first link when the document is loaded.
I use the $(document).ready() function to get your code execute when the document is loaded and ready to use.
I pasted your code inside this function. After I find your first link with $('.ytLink').eq(0) then I use the .trigger('click') on this element. So this trigger will run when the document is loaded.
More info about the .eq() function.
And more info about the .ready() function.
$(document).ready(function() {
$('.ytLink').on('click', function (e) {
$('#frame')[0].src = $(this).attr('href') + '?autoplay=1';
e.preventDefault();
$('#videoTitle').text($(this).text());
});
$('.ytLink').eq(0).trigger('click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 id="videoTitle"></h4>
<div class="embed-responsive embed-responsive-16by9">
<iframe id="frame" name="frame" width="560" height="315" src="about:blank" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<li>
Play Video
</li>
<li>
Play Video
</li>
<li>
Play Video
</li>

How to hide/disabled option to copy link of youtube video?

I'm embedding a youtube video in the HTML with the following code
<iframe width="560" height="315"
src="https://www.youtube.com/embed/7MqMyoxMaW4?controls=0&modestbranding=0" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I'm trying to hide/disable the context menu inside the video. to avoid copy video link.
I was going through API documentation, still couldn't find result.
How can achieve this?
fiddle link: https://jsfiddle.net/us9rev0b/
This is one type of patch but we can hide it by following pure JavaScript
For hide watch later
document.getElementsByClassName("ytp-watch-later-button ytp-button ytp-show-watch-later-title")[0].style.display = 'none'
and For share button
document.getElementsByClassName("ytp-button ytp-share-button ytp-share-button-visible ytp-show-share-title")[0].style.display = 'none'

How to add youtube video without embedded

Im trying to add youtube video in my webpage using below mentioned code, is
there anyone who can help me with that.? have a look on my code below.
<div style="width:400px; height:200px;">
<embed src="https://www.youtube.com/watch?v=Q-AV9KMLTFc" wmode="transparent"
type="application/x-shockwave-flash" width="100%" height="100%"
allowfullscreen="true" title="Adobe Flash Player">
</div>
Use the code that Youtube generates for you after clicking share > embed. It looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q-AV9KMLTFc" frameborder="0" allowfullscreen></iframe>
Set width and height to whatever values you like.
You could do it with <iframe> like this:
<iframe width="500" height="500"
src="https://www.youtube.com/embed/vEROU2XtPR8">
</iframe>
With Autoplay:
<iframe width="500" height="500"
src="https://www.youtube.com/embed/vEROU2XtPR8?autoplay=1">
</iframe>
Note: After "embed/" in src, be sure to write the correct youtube video id which can be found in the URL link after "=" symbol.
Ex: In this link, https://www.youtube.com/watch?v=vEROU2XtPR8
Youtube video id="vEROU2XtPR8".
Be sure to give the width and height properties of the video size that should be displayed on the screen.

Categories