I have this div block which shows a preview image to a video (YouTube), the problem is that this preview thumbnail generated by CMS, it doesn't give the YouTube play icon in the middle of it, so it doesn't look like a video, but just a plain image.
So I came up with a solution (top answer CSS show div background image on top of other contained elements), by adding an empty span and giving it a background, that YouTube play icon and position absolute and positioning it in the middle of that image preview thumbnail. All looks great, now the problem is that background is not a link, the thumbnail is a link to the video, so that transparent icon hides the thumbnail link below it.
According to this post:
Click through a div to underlying elements
It works, if you add the following CSS attribute:
pointer-events: none;
Here is also a post about the IE compatibility: fromanegg
Related
I added a Image Zoom in my website using the following instruction: https://www.w3schools.com/howto/howto_js_image_zoom.asp
But after adding that image not visible in zoomed box while mouse over the image.Its appear blank inside.
Thanks
I am trying to get the effect of moving background image on a section like in below website.
Just about the footer when you scroll up and down the image behind "FIND A CHIPOTLE" scrolls and moves. I am not able to achieve the desired effect.
Please help.
You can do it using CSS:
background-attachment: fixed;
The body of the page has a background image. Most of the divs above it have a white background, but the one where you can see the image scrolling has "background: transparent;" which allows you to see the image attached to the page body. It's not the image itself that is scrolling but the divs above it.
I use video.js in my application for display custom videos. It is working fine but the problem is related to its style, when video displays a black border on its left and right side appears. That means video is not displaying on its full window.
I have not seen your code, but it seems like the container for the video element is not an exact fit for your video.
Perhaps your container width-to-height ratio needs to match the video you are trying to display, otherwise if the borders only appear black on the left-right, then the video containers height is too small and should be larger.
I noticed that there’s a AnythingSlider Video Extension. Is it possible to have combination of images & video in the same slider using this ext?
The demo (http://css-tricks.com/examples/AnythingSlider/video.html#&panel1-1) just uses videos & so far have not seen an example using mixed content in same slider.
I have the anything slider that was 324px tall. I changed the type to html. I used the:
Shortcode >Media to insert my Vimeo vid. Then I created an image that was 324px tall. Used html to insert it at the top of the page:
<img alt="" src="http://www.WEBSITE.com/wp-content/uploads/2013/08/rocks-bannerbar.png" />
In next section, I was using the 2 column layout as you can see so ignore that. Under the Text tab (not visual tab) Had to instruct the video this way with the margin-top code:
[one_half_last]
<p style="padding-left: 30px; margin-top: -320px;">[video type="vimeo" clip_id="12345678" width="275" height="212"][/one_half_last]</p>
This pulled the video up ontop of the image. Now I have a banner image under the video inside my slider object!
Each panel of AnythingSlider is ultimately just a li with content in it, so you can really put any content you like inside that li, including text, images, a video etc. Just make sure those elements fit within the width/height of the li.
Is it possible to show glass effect with 'refraction' using html, css, javascript?
I have an html div "pop up" styled in css (eg: background:rgba(255,255,255,0.5)) to appear transparent. I want portion of the html page underneath the pop up to appear distorted due to refraction. No images are used in foreground or background of the pop up. The underlying html page is dynamic and can have images.
If your background is a canvas, you could use caustics to create a refracted image the size and position of your popup. see http://www.klayge.org/material/3_12/Caustics/fastcaustics.pdf
Here is a nice demo of caustics using canvas.