I created below code for showing youtube video.
But i want to make it now clickable video.
When visitor click on video, then open an url in new tab or popup window.
<iframe class="youtube_iframe" width="710" height="493" src="//www.youtube.com/embed/<?=$cal;?>?autoplay=1" frameborder="0" style="padding-top: 10px;" allowfullscreen></iframe>
Please help me?
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 want to take a screenshot from iframe which is playing a youtube video with a click of a button.
As a small code given below, What I want to do is, Whenever I click on the button it should take a screenshot of whatever is getting played at that particular time so that I can upload it to the server.
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
<button>Take Screenshot</button>
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 working on my personal website.
My website contains a youtube iframe. When mousing over it, the document stop scrolling. I want the main document to continue scrolling even if the mouse was over the youtube video.
<div class="video-container"><iframe width="950" height="480" style="margin-top: 10px" src="https://www.youtube.com/embed/fL3QKagSn1s#t=0m00s" scrolling="no" frameborder="0" allowfullscreen/></iframe></div>
</div>
enter link description here
Try wrapping it into a div and set that div's z-index:10 or something, so this will cause to not mouseover to the iframe but to the div.
I want to show my keek video in my code using iframe. but did not get any code by google that let me know how can I integrate keek videos with site.
Thanks
Try This:
<iframe width="480" height="390" src="https://classic.keek.com/embed/22Preab" frameborder="0" allowfullscreen></iframe>
and you can find embed code from here:
Demo: http://jsfiddle.net/cxw80tux/
The button in the lower right corner that looks like a play button, right of the facebook icon, shows the embed code.