Scenario
My page p1 contains an iframe.
The iframe points to a page p2 containing an embedded video from youtube.
Problem
The problem is that if I scroll (by mouse) the page inside the iframe, it scrolls normally only if the mouse cursor isn't on a youtube embdedded video.
But if the mouse cursor is on a youtube embedded video, the page p2 inside the iframe stops to scroll, while the external page p1 starts to scroll.
How can avoid this no normal behaviour?
I expect that even if the mouse cursor is on the youtube embedded video, the page inside the iframe continues to scroll normally, and it doesn't loose the mousewheel event.
Failed solutions
I tried to add the attribute wmode="transparent" to the iframe tag of youtube embedded video, but it doesn't solve the problem.
Details
To scroll inside the iframe I'm using a plugin that substitues the scrollbar.
Demo
You can find the demo here. Open it with Firefox and scroll with the mouse inside the iframe
I didn't find a solution, other than that suggested by #Kaarel Kont-Kontson.
If I put a div in top of the video the user can play the video and can scroll even if the mouse cursor in on the video.
Specifically, the following is the div to display a single video:
<div style="position:relative; height:200px; width:200px;">
<iframe style="position:absolute;width:100%;height:100%;z-index:-10;" src="//youtube.com/embed/dooCQdg9-NA"></iframe>
<div style="height:100%;width:100%;position:absolute;z-index:20;"></div>
</div>
Found a solution, got observing Facebook code.
Basically, instead of using iframe to embed youtube video, I'm using the <embed> tag, like the following code:
<embed wmode="opaque" salign="tl" allowscriptaccess="never" allowfullscreen="true" scale="scale" quality="high" bgcolor="#FFFFFF" name="swf_u_jsonp_2_2b" id="swf_u_jsonp_2_2b" style="display: block;" src="https://www.youtube.com/v/XvLAKrVbCBM?version=3&autohide=1" type="application/x-shockwave-flash">
Related
I'm working on HTML5 canvas in Adobe Animate CC. Before embedding video I've created click actions and added links and since the video has been added (by Components > Video) all clickable objets stoped to work. Video is playing and slides and all animation is happening except interactive elements. I am feeling that the video is somehow embedded above everything (I have video layer at the very bottom).
Would you be able to help me please? Any advice appreciated
Video isn't part of the canvas, it's DOM element and it's over HTML5 canvas by default. If you'll view Animate's generated HTML code you can see it (video tag in "dom_overlay_container" div).
You need to rearrange your project and keep in mind that you have other DOM elements too in addition to the canvas.
I am using Oracle APEX 5.0 on Oracle 11g R2. IE 11 is the front end browser. I see a very odd behavior most of the times (means not all the times).
Whenever I move the mouse on list boxes , or interactive report rows, or any other object on the page the static images starts flickering like mad.
As long as the mouse keeps moving they keep flickering. When the mouse is stopped they also stop.
These images are CSS background images in the header of the page (I modified the page template and added these images in the style attribute of the tag of the template).
<header id="uHeader" style="background:url(#IMAGE_PREFIX#****.png) no-repeat right top">
But other images on the page itself added by the tag also behave the same. Strange thing is that the CSS background images in the TABS (added via JQuery inline in the page) never showed this behavior at all.
$("nav ul li").each(function(){
if($(this).text().indexOf('**********')!=-1){
$(this).children('a').css(
{"background":'url(#IMAGE_PREFIX#*********.png) no-repeat 3px 5px', "padding-left":"31px" , "background-color":"#FFFFFF"}
);
};
};
These images never flicker.
I have tested the pages in chrome and no flickering for any image on the page happens there at all.
Has anyone ever seen/encountered anything like this? or got it around by any means?
Regards,
I created a set of small PNG files to hug the top and bottom of my website. By repeating themselves on the X-axis they span the entire width of the site and actively shrink and expand with the browser. This worked as predicted until the upper span was pushed to the right allowing another image (logo/button) to occupy the upper-left corner. This repeating image and the banner logo are a contiguous image so I'm doing my best to make it work as designed. I added this bit to my style sheet to nudge the repeating image over to the right:
left:650px;
This caused a horizontal scroll-bar to appear allowing access to a big-open-nothing at the right side of my site (it appears to be the same distance the PNG is being pushed over to). I believe this is called overflow? To constrain the overflow I added the following to the html, body tag in the style sheet:
width: 100%;
overflow-x: hidden;
This removes the scroll-bar in all the browsers I've tested (Chrome, IE, FF & Opera) but in most cases, side scrolling can still be invoked by clicking down on the center mouse button and activating the easy-scroll feature (I don't know the actual name of this feature, but hope you understand what I mean).
FF deactivates this mouse feature but still allows scrolling with the keyboard arrows. IE is the only browser that is working correctly.
I've looked all over for an answer but have only netted some possible solutions, but I don't understand how to implement or even how to describe them. Being a novice I suspect incorrect terminology is also hindering my searches. In any case, if you take a peek at my website:
http://www.cybergolem.com/indexWIP.php
BTW, my div nesting looks like this:
<body>
<div id="container">
<a class="homebutton" href="index.php">Home Page</a>
<div id="header"></div>
</div>
<div id="footer">
<div id="footNote"> — Thar Be Dragons Here — </div>
</div>
</body>
Thanks Much.
I am using video.js. It works great and videos play in all browsers.
The problem I am having is that when I have 2 videos on the same page in IE8, only one works. The other is just a big black rectangle where the video should be. When I remove the code for one of the videos, the other works just fine. As soon as I add the code back in, 1 stops working.
Is there a fix I can use to get multiple videos working on the one page in IE?
Are you giving each player a unique name/string in the video object id? This would also apply to any containing divs or objects for Flash fallback as well.
<video id="video-id-1" class="video-js vjs-default-skin" controls
width="960" height="540" poster="video-1-poster.jpg" data-setup="{}">
<source src="video-1-file.mp4" type='video/mp4'>
</video>
<video id="video-id-2" class="video-js vjs-default-skin" controls
width="960" height="540" poster="video-2-poster.jpg" data-setup="{}">
<source src="video-2-file.mp4" type='video/mp4'>
</video>
I was having a very similar issue and it turned out that videojs wouldn't set up a video inside a hidden element. I ended up having to display the element but position it off screen and then reset the position and hide it again after videojs had initialized it.
I am looking to make a "10 foot" useable site for TV. Ideally it would have a full screen background image a small header where the nav will be placed and under it a container for the content. I would like for the container itself to have a scroll bar, as oppose to the browser having the scroll bar, since this would lose my top header.
Basically top header should be fixed, an image for a background, and a container that scrolls inside itself. I have tried finding templates or a starting point online for this with very poor results. The best i have found so far is http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
This is almost what I need except the container overflows the screen so the scroll bar is in the browser. Also this article was written in 2010, maybe there is a better way to achieve this now?
You can use CSS to style the div.
div.scroll {
background-color:#00FFFF;
width:100px;
height:100px;
overflow-y:scroll;
}
Then... all you have to do is position that div as you want.