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>
Related
Error statement in console
The service worker navigation preload request was cancelled before 'preloadResponse' settled. If you intend to use 'preloadResponse', use waitUntil() or respondWith() to wait for the promise to settle.
Where exactly should I put it and how should I do it?
Is there any simple and good solution?
I am setting up a simple site with vuetify in vue. I am using jquery and css to adjust it.
For your reference, I will put the functions I am using below.
<v-col class="youtube_col" xs="12">
<iframe class="youtube" src="https://www.youtube.com/embed/tpk0PxK-c5E"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</v-col>
You could try using the waitUntil() method on the event.preloadResponse promise:
event.waitUntil(event.preloadResponse.then(function(response) {
// do something with the response
}));
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
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'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'
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