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.
Related
I'm creating a Wordpress site using HelpGuru by HeroThemes (https://herothemes.com/)
I added an iframe to show a vimeo video. This is my code snippet:
<div style="padding:55.83% 0 0 0; position:relative;">
<iframe src="(url)" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute ;top:0; left:0; width:100%; height:100%;" title="(title)">
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
I removed the original url and title of anonymous reasons.
What I expect, and what I also get when I add this code snippet in any html editor (like W3Schools') is to display the video including a fullscreen button to show the video in fullscreen.
However the button is always missing.
What I tried:
I added allow="fullscreen" (How to enable fullscreen in IFrame) aswell as the allowfullscreen tag (see iframe docs).
In the wordpress preview it also does seem to work. Theres no extra styling added to it.
I also tried to have a look at the iframe with the chrome dev tools, there the buttons' display property is set to "none". However just forcing it to be "flex" is not going to work, as the button would not do anything then.
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 create a separate div down the iframe where I can control the volume of the iframe without clicking on the iframe volume icon
Iframe Code is here but it could not run here you can run it in the w3school.com compiler.
<div class="entry-content post-body" id="post-body-5924716169213906958">
<div class="separator" style="clear:both"><iframe frameborder="0" height="500" id="thatframe" allowfullscreen="true" scrolling="no" src="https://www.newucp.com/hembedplayer/webcricn02/3/800/500" width="100%"></iframe></div>
</div>
Frame Source Code is here Because the Code is lengthy and cannot paste here
https://www.dropbox.com/s/ml47hstakk177wt/Framea%20Source%20Code.txt?dl=0
Picture of Iframe
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?
I'm building a popup window. I use an iframe to cover backgroud content then show a div over this iframe to show popup content.
In the background page I have a YouTube video embedded, code sample:
<iframe width="560" height="315" src="http://www.youtube.com/embed/2XY3AvVgDns" frameborder="0" allowfullscreen></iframe>
My problem: The YouTube video always shows on top and covers my popup window.
Note: My code works fine on IE and FireFox, but not GoogleChrome
How can I let my popup window show on top in GoogleChrome?
Change the url to:
http://www.youtube.com/embed/2XY3AvVgDns?wmode=transparent
Notice the ?wmode=transparent parameter.
Setting visibility style property of the <iframe> element to hidden should help.
Can you modify your iframe to object. If yes, try using
<param wmode="transparent"></param>
Hopefully it should work.