could you help me with the following case:
I have a youtube video on my website.
<iframe width="400" height="225" src=http://www.youtube.com/embed/jKIfjiIjd?
rel=0& color=white&iv_load_policy=3&theme=light" frameborder="0" allowfullscreen></iframe>
Beneath and above this video I have some form elements like
<button class = "button" id = "video" type = "submit" onClick = "javascript: somefunction();" >some value</button>
The video is in its own div, the buttons and form elements are in their own divs.
The buttons work perfectly on the desktop browsers, however on the mobile browsers those buttons, that are beneath the video are impossible to click (top buttons are working fine) I figured out that if I remove the video from the page, all the buttons start working. The buttons also work for the first few seconds before the video is fully loaded. So, it looks, like the video is invisibly overlapping the area 100-150px beneath it and makes impossible for mobile browser users to click on any element. (ps Ive tried to use z-index of 1000 - no effect)
Please, help.
Thank you for your time.
I'm having the exact same issue with the YouTube iFrame. I've been testing all day. Here is where I'm at:
The problem is the element that is inside the YouTube iFrame.
<video class="video-stream html5-main-video" controls="true"
x-webkit-airplay="allow" data-youtube-id="..............."></video>
If you 'display:none' that, or change it to 'top:0'. It fixes the problem.
However, since it's inside the iFrame, I dont know how to change it.
To add to this discussion attached is a link to a fiddle of the issue here:
http://jsfiddle.net/krismeister/KynXG/5/
//<script src="http://www.youtube.com/player_api"></script>
<h1>The youtube iframe has a video tag which on iPad blocks touches on elements beneath the iframe.<br><em>tap below the video and you will see no color change.</em></h1>
<div id="vid-placeholder"></div>
<div id="bg"></div>
Related
I have the bootstrap full template (https://startbootstrap.com/template-overviews/full/) and I added a modal and a background image. When I resize it on browser it's responsive, when I go from phone on website the image is above the modal and it doesn't cover all the website.
I just edited the /css/full.css file to add the image.
How can i make it responsive on phone too? I accessed it on Chrome on two mobile devices and has the same problem.
Thank you
You can add "img-responsive" class to your img tag ()
So you the code should be like this:
<img src="your-source" class="img-responsive" />
You have the reference here: https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
However provided code would make your question more precise.
Thank you, but I am reffering to background image, which stops above the modal.
My website looks like:
Background image
blank
Modal
blank to the end
I have an iframe element that contains PDF document the element itself is benaeath a dropdown menu.
|Menu|
<iframe />
it is UI and I can not give you the exact explanation but I believe that you can imagine it. Everytime I click on the "Menu" dropdown a dropdown is generated. No matter that this dropdown has higher z-index attribute it always shows behind the iframe element. This happens in Chrome and IE. I don't know why but it works on Firefox. In other topics I saw that there is a solution if the content was a youtube video but it didn't work for me.
I am trying to embed a video in my aspx page. Everything works fine. The video is not started immediately by setting autostart=false.
Now I want to show a fixed initial image in place of black screen. In IE I did it by setting transparentAtStart=true and some JavaScript code. I was hoping to do the same in Firefox and Chrome, but both don't seem to understand transparentAtStart tag.
I am playing a .wmv file using a .mwv plugin. Is there any other way to show fixed initial image before the user clicks play?
You can use the HTML 5 video poster attribute for your image.
<video poster="/images/poster.jpg" autostart="false">
<!-- sources -->
</video>
I am having a problem with the visibility of my LIKE BUTTON social plugin.
the problem only occurs on IE (it works just fine in Chrome & Firefox), and only to the type of "box_count".
I tried multiple ways to implement the plugin (iframe, fb:like etc...) and the result in IE is the same (as the picture demonstrates in the following link):
print screen of the messed-up FB LIKE-BUTTON
The problem is ONLY while i'm toggling a div (in a "talkbacks" area), while to plugin is inside a DIV with "Display:NONE" (before the display changes to "display:block" by clicking on another link).
I think the property "display:none" effects the plugin on IE somehow, altough the display changes after toggling the div.
You can't have a div with an ID that starts with a number - it's invalid.
Try and use the HTML version:
<div class="fb-like" data-href="http://www.example.com" data-send="true" data-layout="box_count" data-width="70" data-show-faces="true" data-font="arial"></div>
Make sure you don't have any CSS styles that alter the width of the DIV - as Anagio said - use the developer tools on chrome/firefox to inspect the div element that has shrunk. Also look for any javascript errors.
If you can post the actual URL, people will be able to offer more help
I have an embedded youtube video in a page. I also have a menu (when opened) is on top of that video.
I have set the z-index value of the menu to higher than that of the video.
I have also set the wmode of the video to transparent to allow for content on top of it.
I am experiencing no issues at all in safari, ie, chrome, or firefox on my computer (the menu is on top of the video, as it should be), but on the iPhone and iPad - the flash content gets replaced with a big clickable youtube button that opens the youtube embed inside the youtube app, and that big button is above the menu. Does anybody know how to solve that issue?
Thank you!
I am not sure if this is what you need. A live example on jsbin.com would help. Anyway I hope the following be useful.
You can use the iframe method that youtube provides to play its videos. If the browser supports html5 will show the video with it, otherwise with flash. Also it plays perfect with iphone/ipad without open the app of iphone/ipad.
You can use the following code as an example <iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/bIPcobKMB94" frameborder="0">
in the above example the video id is bIPcobKMB94. You can change this id and show your video.
You can access with your iphone a live example of it here
More infromation for youtube iframe
YouTube HTML5 Video Player
The ipad and Iphone unfortunatly don't display flash content. It uses the h.264 version of the videos.
Therefore its an entirely different plugin that actually plays the content and setting the Wmode of the flash file won't make any difference.
EDIT
I've looked and I've no solution for the ipad/sefari/iphone problem.
I encountered this problem as well. After adding parameter "wmode=transparent" for the code
<iframe width="480" height="360" src="http://www.youtube.com/embed/111111?wmode=transparent" frameborder="0" allowfullscreen></iframe>,
the problem is fixed.
I suspect that the application used to switch out the content is setting a z-index level inline. I would find the id of that element (the button or it's container) and set the z-index to lower than you menu z-index. Be sure to include '!important' after the value to ensure it overwrites the inline style.