I'm trying to embed a video within a portfolio piece on Behance. When using the pre-written iframe block provided by Vimeo, I get an annoying thin white border on the right side of my video which makes aligning images below a nightmare. How do I get rid of this? The image shows this, ignore the black outer border, to the right of the right side yellow bar, you'll see a very thin white border. This is not present in the video when played in any other player or in the editing software.
Block Vimeo provide below:
<iframe src="https://player.vimeo.com/video/000000000?
h=8818fac0fe&badge=0&autopause=0&player_id=0&app_id=58479" width="1920"
height="1080" frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen title="Cyberpunk Stream Overlay"></iframe>
Related
I tried embedding a vertical video in Wordpress using the following code:
[video width="716" height="960" mp4="example.com/test.mp4" loop="true" autoplay="true" preload="auto"][/video]
Video shows up as 16:9 ratio with black boxes on each side of the video when embedded using the above code. How do I remove the black boxes and make sure the video fills up the column vertically as a 9:16 ratio?
I tried using the below code but the video shows up 16:9 ratio. I don't know why the black boxes appeared on both sides.
[video width="716" height="960" mp4="example.com/test.mp4" loop="true" autoplay="true" preload="auto"][/video]
I'm trying to build an effect like the one in the video: https://streamable.com/y00nkj
On scroll the grey house appears, then scrolling down again a new layer appears (the blue border house that overlay the first grey house) covering the first image div.
I'm working with react, and I'm using react-waypoint to trigger scrolling events.
I tried css mask and many others css tricks too without results
Sample code:
<div class="container">
<div class="bg-image-fixed"></div>
<div class="scolling-image"></div>
</div>
I found a solution with clip-pathproperty and some basic JS:
here a pen: https://codepen.io/ufollettu/pen/xxPJmBM?editors=0111
I am using Bootstraps grid system to create a responsive site that displays content in containers, never exceeding the viewing height, and display width using three columns, unless viewed through a small screen, in which case then 1 column. Problem is, my youtube embed is not responsive. I've tried setting it to 100%, auto, using several bootstrap classes, switching from embed to iframe and trying many of the same ideas. Nothing is working. I end up with a small static height of about 100px, no matter the width. Here is my html.
<div class="row">
<div class="col-md-4"><center>
<h1>Once in a lifetime</h1>
<p>
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksg
</p>
</center></div>
<div class="col-md-4"><center>
<embed width="80%" height="100%" src="//www.youtube.com/embed/NOcjwN3jkZ4?autoplay=1" frameborder="0" allowfullscreen></embed>
</center></div>
<div class="col-md-4"><center>
<h1>Check it out!</h1>
<h3>http://wwww.link.xyz</h3>
</center></div>
</div>
and here is some css I'm using to prevent horizontal scroll.
html, body {
max-width: 100%;
height:100%;
overflow-x: hidden;
}
Please help.
Using any of the snippets below will allow browsers to determine video dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/NOcjwN3jkZ4?autoplay=1"></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/NOcjwN3jkZ4?autoplay=1"></iframe>
</div>
You may want to checkout bootstrap documentation for more info on this
http://getbootstrap.com/components/
I'm trying to make a custom, irregular frame for a google maps iframe. You can see my results so far here:
http://bufident.com/pruebas/site02/contacto/contacto.html
(please forgive the sloppy markup)
The only way I could think up of doing this was by having 1 div with the frame overlapping the div with the map like this
<div style="width:418px; height: 375px;position:relative;top:-375px;z-index:3;">
<iframe width="418" height="375" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=bufident&hl=en&sll=40.397236,-3.704112&sspn=0.071946,0.071946&ie=UTF8&t=h&view=map&cid=5584215307643134377&hq=bufident&hnear=&ll=40.397238,-3.704109&spn=0.006128,0.008948&z=16&iwloc=A&output=embed"></iframe>
</div>
<div style="clear:both;"></div>
Unfortunately, if i do this i'm no longer able to interact with the map. I tried a slightly different method suggested in another thread ( http://www.cssbakery.com/2010/11/css-cookie-cutter-revisited.html ) but i get the same results
Any suggestions? thanks everyone
Use 4 images instead of one.. The div holding the images must be under the iframe, and the images above.. So you need absolute positioning for it.. That way the overlapping images are more border-like..
Also there is another solution that allows clicking through div's, found that in a jquery plugin. I'll check if I can find it..
EDIT
Here is a site which explains how cliking through divs works:
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
You are laying the DIV on top of the map, so you the Google Maps Javascript, won't detect clicks / interactions with it because you are actually clicking the DIV, rather than the map.
Don't think what you are trying to achieve would be possible. Best compromise I can see is to have the rough border on the outside of the box, but keep the inner edge of the border still a square. Set the background image on the parent DIV, and position the map in the middle of your div, on top. Something like this...
<div style="background:url(image.jpg); padding:20px">
<iframe />
</div>
I have a gradient background that I'm using like follows in an ASP.Net Webforms application:
<div style="background-image: url(foo.jpg) repeat-x;">
... Injected HTML codes
</div>
Where foo.jpg is a 200x1 pixel image. My problem is this, the height of the injected HTML varys from about 200px to 1000+px depending on size of a datagrid. Also, this segment is part of a much larger page that uses for positioning content.
What I would like is that after the HTML is injected, have the background automatically stretch to fit the space so that the gradient is applied smoothly over the entire height.
CSS cannot stretch background images.
However, IMG elements can be stretched, so you can put an IMG right before the grid, use CSS to give it position: absolute and z-index:-1, and use jQuery to set its dimensions to be equal to the grid.
I was researching exactly how do do SLaks solution and discovered a "hack" that works for my situation. While it doesn't do a stretch operation, I'm simulating one in a way that works for my situation and it is 100% CSS. I don't claim that this is a general solution, but it does work for me.
To answer the question, I need to be a little more precise in my definition of my problem.
in my original code,
<div style="background-image: url(foo.jpg) repeat-x;">
... Injected HTML codes
</div>
foo.jpg is 600px x 1px gradient from a color to white which is color of web site. This way on the larger displays, I get a very smooth transition from color to white. That it doesn't go all the way to the bottom is something I can live with. The problem comes when I need to render some data that displays only 300px high. Then only 300 px of the 600px in the gradient display. Resulting in an "ugly" step change in the color. This is what I really needed to get rid of by doing the resizing.
While resizing the background is the technically cleaner solution, what I did was
<div style="background-image: url(foo.jpg) repeat-x;">
<div style="background-image: url(fooBottom.png) repeat-x; background-position: bottom;"
... Injected HTML codes
</div>
</div>
fooBottom.png for me is a 200px by 1px image that is 100% white at the bottom and 100% transparent at the top.
The key thing on the inner is the "background-position: bottom;" This positions the new background section. If the section being displayed for me is >800px high, this new code does nothing visually.
But for sections shorter than 800px, what happens is the bottom image gets closer to the top. This coverage occurs because the inner block is drawn "above" the outer block. Then if the section gets shorter, the bottom background image covers more and more of the top background image.
But because of the transparency in the lower image, it ensures that on shorter sections, that there is a blend to white at the bottom.
I'm going to create a blog on my personal site that shows examples. When I get the example done, I'll update this post.
UPDATE - I've posted a working example at http://sntsoftware.com/Blog
I've been in your situation before, and I ended up having about five different background images for the resolution variations. If it was their first time to the site (no cookie present), I'd present them with a landing page where I set a cookie (using Javascript) with the value of the client resolution (see my getViewportDimensions function in this blog post). On the server-side, I evaluated the resolution on the next request and chose which image to inject in my CSS. It works well. Be sure to have a default resolution set on the server-side in case the user agent has Javascript or cookies is disabled.