I have a shopify shop where I want to have a video banner.
I managed to set it up like the code below.
It shows up on the site and works well but I want to reduce the height of the video because it is really big. But when I adjust the height and set the video height to 75% then the bottom part of the video is not showing. It is just cut off the video.
Can I adjust the height while the video is showing the full video but rescaled?
I tried a lot of things found on internet but none worked for me. Can someone help me please?
Thanks.
Best regards,
Kevin
Liquid/HTML
{% if template.name == "index" %}
<div class="top2">
<div class="wrapper2">
<video autoplay loop muted playsinline>
<source src="https://cdn.shopify.com/s/files/1/0093/6552/0444/files/Smilezz.Promovideo.2019.Bannervideo2.1080p.mp4?4182" type="video/mp4">
</video>
</div>
</div>
{% endif %}
CSS
.top2 {
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
position: relative;
display: block;
font-size: 0;
}
.wrapper2 {
position: relative;
padding-bottom: 200%;
transform: translateY(-35.95%);
margin-bottom: -200px;
font-size: 0;
}
video {
position: absolute;
top: 0;
left: 0;
width:100%;
height: 85%;
display: block;
padding: 0;
}
The video simply needs to keep aspect ratio, otherwise the video will be cutted either vertically or horizontally.
The best approach is to control the width of video, and the height will scale automatically
Your edited CSS:
.top2 {
display: block;
/* example width - can use '%' as well */
width: 300px;
}
.wrapper2 {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
video {
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
}
Related
Bump. Any idea? Thank you!
-
Displaying 3 slides/images per view, looped, centered.
With a clean cache, Swiper starts with the last slide and misses the first to the right. Browser refresh seems to fix it: swiper starts/initializes with first slide, no blank slides remain.
The amount of images is dynamic.
UPDATE:
The issue is with the CSS we added:
.swiper-container {
width: 100%; height: 100%;
margin-left: auto; margin-right: auto;
}
.swiper-slide {
max-width: 1200px;
height: auto;
text-align: center;
line-height: 0;
}
.swiper-slide img {
height: 550px;
width: auto;
}
.swiper-slide:nth-child(1n) {
height: 550px;
width: auto;
}
Removing the very last bit (nth-child) resets the slider to always start with the first slide. But the images stop sitting next to each other, but instead are spread apart.
Created this to demonstrate a little quicker:
http://jsfiddle.net/L3b1fzh9/13/
You can remove the last few lines of CSS, because .swiper-slide:nth-child(1n) matches every single .swiper-slide element, so this selector doesn't actually do anything (n is a set of all integers, so when you multiply by 1 you just get 0, 1, 2, etc.).
The reason why the images stop sitting next to each other is that their parent container .swiper-slide has width: 100%. You need to change that to width: auto and add margin: 0 auto to center the slides.
So your .swiper-slide CSS becomes:
.swiper-slide {
max-width: 1200px;
height: auto;
text-align: center;
line-height: 0;
width: auto !important;
margin: 0 auto;
}
And just remove the .swiper-slide:nth-child(1n) CSS.
Updated fiddle
I am new to shopify and I wanted to add the Instagram feed on the website I'm working on. This website is using Retina theme and I think this is not an updated theme. I read some articles like here about missing instagram feed in shopify store homepage and they said I need to have an access token. Now that I have my access token, I don't know what to do with it. I mean, where can I insert this token? Any help would be much appreciated.
{{ 'instafeed.min.js' | asset_url | script_tag }}
{{ 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css' | stylesheet_tag }}
<h2 class="instagram_heading" style="text-align: center;"><span style="color: #000;">Store Name</span><span style="font-weight:normal;"> On Instagram </span><a target="_blank" href="https://www.instagram.com/shopgear101/"> UserName</a></h2>
<section class="twitter-feed footer-bottom-margin">
<div id="instafeed" class="photo_list list-inline">
</div>
<script type="text/javascript">
var userFeed = new Instafeed({
get: 'user',
userId: 'userid', //Put The user id here..
accessToken: 'accesstoken', //Put The access token here..
limit: '10',
template: '<div class="twitter_img" style="background-image: url\(\{\{image\}\}\)"><div class="inner_image text-center"></div><a target="_blank" href="\{\{link\}\}"><div class="inner_image"><span class="text_like"><i class="fa fa-heart" aria-hidden="true"></i> \{\{likes\}\}</span></div></a></div>'
});
userFeed.run();
</script>
<style>
.twitter_img{
float:left;
position: relative;
width: 20%;
padding-bottom : 20%; /* = width for a 1:1 aspect ratio */
background-position:center center;
background-repeat:no-repeat;
background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
}
.inner_image {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
background: rgba(0, 0 , 0,.5);
color: #fff;
width: 100%;
height: 100%;
opacity: 0;
}
.twitter_img:hover .inner_image{
opacity: 1;
transition: 0.3s ease;
}
.text_like{
font-size: 22px;
position: relative;
top: 47%;
left: 45%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
#media screen and (max-width: 420px){
.twitter_img{
width: 50%;
height: 190px !important;
}
}
</style>
</section>
Well, it requires some coding skills. Try to use free Instagram apps from Shopify Apps Marketplace. You won't need to do anything except copy & paste the embed code:
https://apps.shopify.com/instagram-feed
https://apps.shopify.com/instagram-photos
Am creating an image editor library with the support of KinetiJS.
In my html,
<div id="editorarea" class="fill">
<div id="imageContainerDiv" class="imageContainerDiv" >
<div>....</div>
<div>....</div>
<div id='rotateouterDiv' class='rotateouterDiv' >
<textarea placeholder='Enter You Text here' id='inputField' name='graffiti' class='textContainerMob'></textarea>
</div>
<div id='imageContainer'></div>
</div>
</div>
Then creating a stage
_kineticStage = new editor._Stage({
container : 'imageContainer',
width : $('#editorarea').width(),
height : $('#editorarea').height()
});
Kinetic.Util.extend(editor._Stage, Kinetic.Stage);
And adding an image,
_kineticImage = new editor._Image({
x : 0,
image : img,
y : 0,
draggable : true,
});
layer.add(_kineticImage);
The CSS applied is,
#editorarea {
width: 100%;
height: 80%;
margin-top: .1%;
min-height: 70%%;
display: block;
border-width: 2px;
border-style: solid;
}
.fill {
min-height: 85%;
height: 90%;
}
.imageContainerDiv {
width: 100%;
height: 100%;
z-index: 0;
left: 0;
right: 0;
background-color: #FFF;
display: block;
background-image: url(../images/back_pattern.png);
background-repeat: repeat;
overflow: hidden;
}
The textarea should be on the top of the image. In this case, I placed that div containing the textarea using the #media queries, for supporting different screen size and orientation.
The issue occurs when following the steps: load the page in portrait, then change the device orientation to landscape. Then the position of textarea is not correct. This is because the kinetic stage is not properly resizing on orientation change (only the area with image).
Can anyone help me to resize it properly? This should work in touch devices.
Thanks...
I have a site made of "slides" 100% height.
<div class="slide" id="one">page1</div>
<div class="slide" id="two">page2</div>
<div class="slide" id="three">page3</div>
I use waypoints to perform some animation based on the position of the scroll, and it works fine. The context used is "window" and below an example:
$('#one').waypoint(function(direction)
{
//do something
}, { offset: '75%' });
By the way, in a slide there is a button that modifies the height of an image (it becomes very big), so after the resize the height of the container changes and also the height of the "slide", too.
I need the waypoint to refresh, in order to be raised at the same percentage calculated on the new size of the slide. I tried to do
$.waypoints('refresh');
after the resize, but it seems not working.
Below a piece of my css:
html {
height: 100%;
}
body{
text-align:center;
height:100%;
margin: 0 auto;
overflow-x: hidden;
}
.slide{
height: 100%;
margin: 0 auto;
background: white;
min-height: 700px;
min-width: 1024px;
}
#home {
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
min-height: 800px;
}
Can someone help me?
I'm trying to make the images inside bootstrap carousel responsive in terms of height first, width second. This is because the images I'm adding to the carousel are for the most part of larger height than width although I should write the css where it will look the same regardless of the image dimensions.
I am overriding the class on my styles rather than modifying the bootstrap stylesheet because I prefer to load bootstrap using CDN.
The class I'm adding to my style is
.carousel-inner > .item > img {
position: absolute;
top: 0px;
left: 0px;
height: auto;
max-width: 100%;
}
The height: auto and max-width: 100% works great. The problem I run into is that the .carousel .item has a height of 500px. bootstrap.css line 49.
.carousel .item {
height: 500px;
background-color: #777;
}
I can't give the class shown above a height of auto because the image then is not visible. If I leave it as such, images with a height over 500px get cut off, images smaller will make the carousel seem out of proportion.
Any help on this will be greatly appreciated. Thanks in advance.
This seems to work.
I placed the carousel within a carousel-container div and added the following to my css:
.carousel, .carousel-inner > .item {
display: run-in;
width: 100%;
height: auto!important;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
height: auto;
max-width: 100%;
line-height: 1;
}
.carousel-container {
margin-left:0;
}