Just need some advice. I have a homepage where I have 3 Vimeo videos added in a slider (page shows different video after refresh).
This slows down the page, and also the videos look fuzzy on the screen, sometimes lagging. They need to be looped, and can not add any click event on it (I was think about the lazyloading but can not work with that as the video needs to be looping constantly).
Do we have any better option for embedding vimeo videos?
I have the following code:
<iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" height="950" src="https://player.vimeo.com/video/753826918?h=431b8314ba&autoplay=1&loop=1&autopause=0&muted=1&background=1" width="100%"></iframe>
Any other suggestions how the videos could be loaded/embedded on the page so it will speed up the loading time? Thank you.
Related
I got this problem for almost 1 week without any solution working.
I have an ReactApp use iframe tag to play youtube video.
The request is to click another tag (such as thumbnail) then video will be played instead of clicking directly to iframe.
Thumbnail have z-index = 2; iframe z-index = 1. When click thumbnail, thumnail will be hidden (display=none).
I can do this by add '?autoplay=1&mute=1' to youtube embed url when click the thumbnail. This works well on desktop. BUT Because youtube not allow autoplay on mobile/tablet so user must click twice for video to play, first click on thumbnail, the next click on iframe.
Is there a way so that use can only click once on thumbnail then theo video will auto play?
My website have different domain with youtube so any way like accessing element inside iframe are not allowed.
This task should be completed with only vanilla javascript/typescript only. We don't prefer using third party like react-player because these player will impact app performance.
Below is codes similar to the real project. I would appreciate to any advice as I am really exhausted with this :)))
<div id="container">
<div id="thumbnail"></div>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/9xwazD5SyVg?autoplay=1&mute=1" title="Dummy Video For YouTube API Test" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
I am making a website and I have to show a video on its homepage. The video exists on youtube and I need to embed it on my website.
<html>
<iframe width="560" height="315" src="https://www.youtube.com/embed/spPdelVEs_k?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</html>
Unfortunately my webpage shows a completely different video. It shows this one.
https://www.youtube.com/watch?v=7sNL0T93ItM
Does the URL convert to something different? Help me solve this problem.
Your code is fine. You just need to clear the cookies on your browser and then it should load fine for you.
This is the video your code goes to:
https://www.youtube.com/watch?v=spPdelVEs_k
I am building one of my first webpages and am very novice when it comes to any custom html, js, css, etc. I'm building the site in Squarespace on the Alex template. My goal is to have a lightbox that opens from a text link and plays a youtbe video. Currently, I am able to get the text link to open a lightbox (featherlight) and play a youtube video (iframe embed), but then I run into 2 problems.
1. The audio for the video plays twice
2. when I close the light box, one set of the audio keeps playing.
I am totally lost here and have scoured trying to find a solution. Here's what I have:
<a id='open_lightbox' data-featherlight='.lightbox_content' href='#'>open lightbox</a>
<div style="display:none;">
<div class='lightbox_content'id=ytplayer>
<iframe id="video1" width="1280" height="720" src="https://www.youtube.com/embed/g7fbe-oV-X0?rel=0&enablejsapi=1&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
<script>
$("#open_lightbox").click(function(){
$("#video1")[0].src += "&autoplay=1";
ev.preventDefault();
});
</script>
</div>
</div>
A lot of this is taken from different posts, but I haven't found anything that works. This is the last bit I had worked out that gets the video to play, but I don't know how to stop it, or why there are two audio instances running. Any help is appreciated.
Try this:
$('.#open_lightbox').on('click', function(ev) {
setTimeout(function() {
$("#video1")[0].src += "&autoplay=1";
},150);
//ev.preventDefault();
});
The way you do it used to work - I just had to use the trick again and faced the same problems. Adding a small delay and remove the preventDefault() worked for me.
You might need to put a more specific jQuery selector for the "#video1" so it isn't auto-playing two videos.
I'm trying to get a Youtube video to play automatically when a user clicks this link:
<a class="videoLink" href="//www.youtube.com/watch?v=CBg_G-_zOf0&rel=0&autoplay=1" rel="lightbox"></a>
This opens and displays the video in a lightbox (I am using SwipeBox) but does not autoplay the video.
The '&rel=0' works fine, no suggested videos are shown after the video (it will not work if I use '?rel=0'). But the '&autoplay=1' does not work at all. I have tried using '?autoplay=1' but that gives me a JSON error (something to do with having multiple "?'s" in the URL).
This is the code of the YouTube video when it is open within the lightbox:
<iframe width="560" height="315" src="//www.youtube.com/embed/CBg_G-_zOf0?rel=0&autoplay=0" frameborder="0" allowfullscreen=""></iframe>
As you can see, the 'autoplay' is set to '0' which is no good. If I change the value to '1' in developer tools the video refreshes and automatically plays as expected.
Any suggestions on how I could possibly force the autoplay value in the iframe to be 1 would be awesome.
A YouTube iframe can play a video using an HTML5 player instead of Flash, by adding "html5=1" as a URL parameter. However, this only works sometimes. For example the emebeds below are identical, except for the YouTube id in the iframe URL. The first iframe plays fine if there is no Flash player installed but the second requires flash. I've tried this in both Chrome and Firefox.
<iframe title="YouTube video player" width="720" height="720" src="http://www.youtube.com/embed/O_ceIIJeVNQ?html5=1&modestbranding=1&controls=0&title&loop=1&playlist=O_ceIIJeVNQ&enablejsapi=1&origin=http%3A%2F%2Flocalhost%3A8080"></iframe>
<iframe title="YouTube video player" width="720" height="720" src="http://www.youtube.com/embed/YmehSeNXXt4?html5=1&modestbranding=1&controls=0&title&loop=1&playlist=YmehSeNXXt4&enablejsapi=1&origin=http%3A%2F%2Flocalhost%3A8080"></iframe>
http://jsfiddle.net/judeosborn/2SAas
Any idea how I can get embeds to play in HTML5 consistently?
#Jude Osborn
"Apparently HTML5 video will not play for videos with ads, captions, or annotations"
That is impossible, the biggest part of youtube videos will have ads captions or notations
if it was true Youtube would be dead soon.
The fact that one video will play and the other not
is probably caused by if a version exists that is available
in the right format...which might depend on how old it is.
They dont convert videos on the fly..but create various versions
and send the right one to the right browser or device.
It should be that the new(er) embed code as shown below videos #Youtube
takes care of sending the right video to you.
By the way NONE of the PLAYLISTS will play anymore on iOS (iPad/iPhone)
i noticed that today, no replies are given in any yt-forum
Single videos play fine.
A colleague of mine found the answer in the original HTML5 video post announcement here:
http://youtube-global.blogspot.co.uk/2010/01/introducing-youtube-html5-supported.html
Apparently HTML5 video will not play for videos with ads, captions, or annotations.