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]
Related
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>
I've got an issue about the resizing of a picture, in a full page div.
The thing is that it seems some breakpoints are missing (for 15 inch screens for example). The picture is croped at the bottom and resizes well for smaller screen.
Here is the link : http://mango-assurances.com/
Any ideas ?
Cheers,
Loïc
Your image is 1200x848 large... with your header and cookie notification area you're running out of vertical heigh and the "cropping" is natural viewport restrictions.
This UI is totally acceptable and you don't need to change it. (Remember the user could have a browser that is smaller-windowed than full screen.)
But if you do then you have 2 options: 1) Use a smaller image, & 2) restrict the width (or height) of the image with a CSS restriction (max-width:800px) - like this...
<img src="img/mango-hd.png" class="img-fluid center wp wp-7 mt80 animated
fadeInUp" style="max-width:800px">
I have a stock image of 1772 px. This image is the largest available. The raw file is gone so I can't create an image of 5120 px wide. How would the markup and CSS look for that image if I want to be able to stretch it nicely across the entire width of the iMac?
Minimum requirements:
I'm using Bootstrap so it has to work with that. And preferably with the img-responsive built-in class. Do I need to have the img-tag in a container-fluid div?
<picture>-element needs to be used since art directing is involved. When the viewport hits 767px and lower I'm displaying the image in portrait mode.
Here's the code I'm experimenting with:
<picture>
<source media="(min-width: 768px)"
srcset="/img/landscape/large.jpg 1772w,
/img/landscape/medium.jpg 886w,
/img/landscape/small.jpg 443w"
sizes="100w" />
<source srcset="/img/portrait/large.jpg 955w,
/img/portrait/medium.jpg 640w,
/img/portrait/small.jpg 320w"
sizes="100vw" />
<img src="/img/landscape/medium.jpg" alt="" />
</picture>
Currently firefox and Chrome managemes to strech out the image nicely but IE10 stops at 1772px and leaves white-space on the right of the image.
If I set the img to width:100% the image will stretch but I'm confused of wheather this is the right approach since in Bootstrap they use max-width.
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 am using an adaptive layout on my site by using media queries.
Now when I resize the browser window past a certain media query, the google map displays faulty (see image)
What I do:
CSS:
#googleMap2{display: none;}
#media screen and (min-width: 919px){
#googleMap{display: none;}
#googleMap2{display: block;}
}
HTML:
<div id="googleMap">[google-map-v3 width="920" height="550" .......]</div>
<div id="googleMap2">[google-map-v3 width="768" height="320" .......]</div>
You need to let the map know it's been resized:
google.maps.event.trigger( map, 'resize' );
Call this on the resize event for your page or container.
With this approach you can use a single map and resize it as needed, instead of having to switch between two or more fixed size maps.
This fiddle has a working example. I don't know what the rest of your page layout will look like, but to illustrate one common layout I put a top bar and sidebar in the page, with the map filling the remaining space on the bottom right. Try resizing the page and you will see it in action.