How to add youtube video without embedded - javascript

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.

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

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>

I am unable to create thumbnail of video

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

onClick add parameter to url

I am trying to insert a youtube video with a custom thumbnail to my website. Therefore I found this code, which I am using.
<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=myImage" style="cursor:pointer" />
</div>
<div style="display:none">
<iframe width="420" height="315" src="https://www.youtube.com/embed/TlMNLFiARBA?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
It works so far, but the autoplay makes the video play behind the cover image. So I've tried to add the autoplay parameter onClick, so it changes to true as the cover hides.
I have tried to use
<div onclick="this.nextElementSibling.style.display='block';this.nextElementSibling.href + '?rel=0&autoplay=1'; this.style.display='none'">
But this isn't working. To be honest, I have no background in JS and do not know what I am doing. Could anybody please help me with this? Just adding a URL parameter to a given Link onClick.
thank you.
I think you are not doing things the right way.
when you change the url of the iframe, the iframe will reload, not just start to play.
try this:
<div onclick="this.nextElementSibling.style.display='block';this.nextElementSibling.children[0].src='https://www.youtube.com/embed/TlMNLFiARBA?rel=0&autoplay=1'; this.style.display='none'">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=myImage" style="cursor:pointer" />
</div>
<div style="display:none">
<iframe width="420" height="315" frameborder="0" allowfullscreen>
</iframe>
</div>
this will show the iframe and change the url the same time.

iFrame link in <a href="link.html">

How do I set up this link as below with using iFrame but without a video itself but name e.g. Interview video
Here is a iframe of have as below:
<iframe width="400" height="225" src="http://www.youtube.com/embed/G_G8SdXktHg" frameborder="0" allowfullscreen></iframe>
to in this as below:
<div class="toogle_wrap_intro">
<div class="trigger">Browse video categories</div>
<div class="toggle_container_video">
<ul class="lists_video">
<li><a href="video/aps_production.mp4"><p>Interview video</span></p></li>
</ul>
</div>
</div>
This is for iPhone and jQuery1.8.1. What is the correct way to set up a video link via for a drop down menu and when a video finished playing it will go back to the same page.
I am guessing that you are using a frame because you want to hold the video in a certain place? I would suggest using the <video> tag in html5 instead of iframe.
<video width="400" height="225" controls="controls">
<source src="video/aps_production.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
give the iframe an id and target it in the link's url: iframe id="iframe" and then append #iframe to the url of the document the link is in. a href="url.html#iframe"

Categories