I am trying to place an mp4 video into the background of a web page, with a container sitting on top displaying the page's content.
The video obscures everything though, even though I have the z-index set on the video css and on the bootstrap container
snippet - https://bootsnipp.com/user/snippets/Q0jbX
Is there a step I am missing?
I worked it out and updated the snippet https://bootsnipp.com/user/snippets/Q0jbX with the answer for anybody experiencing the same.
I added a class that had position:relative in it, and included it in the container, that solved my problem.
Related
When you go and play a video on our site the youtube video container goes down and a part of the video is cut from the top.
See http://laughpot.com/a-terryfying-world-record-on-a-bike-must-watch/
I recently added few CSS to make the video description look nicer and this is happening since I did that.
I even removed my custom CSS but the video is still cutting.
Can anyone please inspect the video div using Chrome developer tools and figure it out which CSS class or rule is causing this issue? I tried to find it but I got no success.
I will be very thankful!
Try this set this css on
1.) iframe {height:473px;} and
2.) set display:none for class yesp-title
output get like this
There is a top that is causing this problem on the element itself the video class="video-stream html5-main-video" within the class="html5-video-container"
top: 101.25px;
To resolve this issue, more elegantly you can use fitvid jQuery library
http://fitvidsjs.com/
WP plugin is also available for fitvids.
https://wordpress.org/plugins/fitvids-for-wordpress/
I'm new to development, and I can't wrap my head around why this will not display correctly in Firefox. I simply have a centered div with a background, and a background in the body. Nothing will display in Firefox.
Because your div/body has no content and does not have a fixed height/width.
Fixed. :) Thanks folks! I had my header in an include file in the /include folder. So I was pointing to my css using relative path ..\style.css. Apparently this works in IE and Chrome but not Firefox. /style.css made it work!
I want to put an embedded youtube video over the top of an image so it looks like there is a frame around the Youtube video. They are perfectly aligned horizontally, but I can't seem to align the video & image vertically. Somehow I need to add padding to the top of the Youtube video so it is lowered into the frame.
I'm using Wordpress and the measurements for the frame fit the video perfectly. I just need to lower the video into the frame.
Any ideas how to lower the Youtube video to make it align correctly inside the Frame?
Thank you!
You can use CSS to apply a margin or padding to the Youtube video HTML element (probably an iframe tag if you are embedding it)
So, your CSS may look something like this, depending on your HTML structure:
iframe { margin-top: 10px; }
You'll need to play around with the value of margin-top to make it align the way you like.
If you post the relevant HTML, I could give you specific CSS to use.
Just wondering if anyone knows any tricks to getting regular html content (mainly an img tag) to display on top of a video (via the video tag)?
As others have intimated it's very easy to position HTML elements on top of VIDEO elements using absolute positioning. The challenge comes when you try to capture events on them in the iPhone, iPod and possibly older Android phones that don't play video assets inline on the page (as opposed to in a thin native playback client) since in those instances the VIDEO element greedily captures events.
If you use an IMAGE element or a DIV with its background-image set to an image you want to use as a "poster" or "thumbnail" then your users won't be able to tap on them to get the video to start playing -- the mobile browser will treat this behavior as if nothing but the VIDEO element exists in that space (good if you happen to click in the middle where the "big play" button is but not so helpful if you, say, have a custom control not in the middle.
The solution I've used in the past is to just put the IMG or DIV poster on the page where you would normally put the VIDEO element and shift the VIDEO element offscreen (absolutely positioned with left style set to, say, -3000px) so it can no longer hoard those events.
I know this isn't exactly what was asked, but hopefully this information will prove useful to someone.
You can simply put html elements on top of HTML5 video by positioning them absolutly on top of the video. Give both the video element and the HTML element a "position:absolute" and put the HTML element a z-index higher than the video element's.
Why not use the poster attribute? That way you can display an image until the video is loaded or play.
Can you set the video as background for that div? Not sure if it would work for your layout, but it seems logical...
I'm building a Flash banner ad to be displayed on a client's site. When the user hovers over the ad, the Flash movie expands by increasing the height and width of the flash object.
The problem is that the client is using overflow:hidden all over their site, and my banner ad is contained within a div that is styled with overflow:hidden.
When the flash movie expands it gets clipped. This only happens in IE 8, all other browsers (at least IE 7 and FF) do not clip the flash movie. I tried explicitly using wmode=window but that doesn't seem to do anything. Maybe IE 8 is being standards compliant and doing the right thing here, but I just need this to work!
Any ideas on how to get the flash content to expand out of the div without changing the styles (not sure what would happen if I changed the overflow:hidden style on the client's site).
Thanks!
To isolate the banner's style from the rest of the site, you might try putting it in an iframe with a 0px border. The trick is that then the iframe has to big enough to accommodate the expanding flash object.
You cannot do it without changing the style. The way banner ads work is that they use Flash and JavaScript to trigger the change in styles. So you would have two styles, one of the collapse and another for the expanded states, Flash would make the call to the JavaScript and it would change the style.
when the flash object was wider than the DIV and DIV is overflow:hidden to limit the flash object to the sidebar
may embedded flash object still overflowed into the next DIV.
the issue is related to the embedded object and that wmode=”transparent” parameter needs to be included.
<embed
src="your-swf-url-here"
width="xx"
height="xx"
wmode="transparent"
/>