Adding a responsive video to store hompage

New Member
2 0 0

Hi, 

I have added a video to my store homepage: http://www.t-tagdirect.com/.  I have it looking just how I want it on desktop and tablet screens but I can't figure out how to make it responsive for mobile/cell phone screens (i.e., to automatically resize down so that the video doesn't disappear off the side of the page). I've tried using www.embedresponsively.com, which works fine in terms of making the video responsive, except that it takes up the full screen and I would like it to only take up 50% or so of the screen. 

Is there a way to use www.embedresponsively.com but make adjustments to the code so that it doesn't expand to 100% of the screen on desktops? Or is there some other neat way to make my video responsive whilst keeping the video size setting I currently have for desktop/tablets (i.e. 560x315)?

Any help would be much appreciated. 

Thanks,

Joe 

0 Likes
Shopify Partner
97 0 7

Hi Joseph,

On your styles.scss.css ( go to HTML/CSS editor) add some simple css on bottom

#feature_video iframe{max-width: 100%;}

Hope this will help you

 

Shopify Expert/ Shopify Support
0 Likes
Shopify Staff
Shopify Staff
370 0 32

Hello Joseph, Ben here - your Shopify Guru!

  Just change the width value to be 50% and the height to auto via css using a mixin. You would need to add this to the embed code. 

@media screen and (max-width: 480px) {
  .embed-container { max-width: 50%!Important; height: auto; } 
​}

So something like  

<style><!--
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 480px) { .embed-container { max-width: 50%!Important; height: auto; }}
--></style>
<div class="embed-container"><iframe src="//www.youtube.com/embed/QILiHiTD3uc" frameborder="0" allowfullscreen=""></iframe></div>

This should make the video 50% of the container where ever you place it. Just replace it with your video link.

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

0 Likes
New Member
2 0 0

Hi Ben, thanks very much for your reply. 

I'm afraid I'm a complete novice and I'm not sure I've followed your instructions properly. 

I've copied your code and replaced the video embed link with my video and pasted the code into theme.liquid. The video is now showing up full screen on my desktop and is sitting off to the left of the screen on my iPhone. 

I was hoping for it to only take up 50% or so of the screen on my desktop (i.e. to appear around the same size as a 560x315 youtube video) and ideally to be centred on the iPhone screen. 

Have I done something wrong? 

Thanks! 

Joe

0 Likes
Shopify Staff
Shopify Staff
370 0 32

Hey Joseph, 

  Sorry I thought you wanted the video to be half the size on mobile. If you want the video to be 560x315 on the desktop you can just put that in as the width and height. Give this a try:

<style><!--
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; text-align:center; margin: 0 auto;} .embed-container iframe, .embed-container object, .embed-container embed { position: relative; top: 0; left: 0; width: 560px; height: 315px; } @media screen and (max-width: 480px) { .embed-container { max-width: 100%!Important; height: auto; }}
--></style>
<div class="embed-container"><iframe src="//www.youtube.com/embed/QILiHiTD3uc" frameborder="0" allowfullscreen=""></iframe></div>

That will put the video centered and 560x315 on the desktop and then make it 100% width on mobile. Again you will want to replace the video url with your own. 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

0 Likes
New Member
13 0 0

Hi Benjamin,

I would like to ask a question, if I may..

In my scenario I would like to to create a videos' strip [attached image], that will follow:

25% | 50% | 25%

but my problem is that I can't expand them.

Please advise and thanks!

Yo

 

0 Likes
Shopify Staff
Shopify Staff
370 0 32

Hey Yo, 

 You would need to set your container for all the elements first to be the larger size. Then when you copy the embed codes you can use your percentages. If your looking to have the heights change just put in the % as the value and set the width to be auto. When you copy the embed code for a video from youtube just change the values.

 Again you would need a wrapper around all the videos with a max-height set for how tall you want the larger videos. 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

0 Likes
New Member
13 0 0

Hey Ben,

Many thanks for your prompt answer!

Will keep you in the loop for sure!! :-)

Yo.

0 Likes
New Member
1 0 0

I have a similar situation. I'm using product review videos and on desktop they're fine but on mobile they're cut off.

This is the webpage: https://www.copycatbeauty.com/pages/product-reviews

 

This is what I used on a page I created.

 

<center>

<ol>

<li>

<table>

<tbody>

<tr>

<td><iframe width="560" height="315" src="https://www.youtube.com/embed/mx7Xpy2lN8I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></td>

<td><iframe width="560" height="315" src="https://www.youtube.com/embed/6QYXZveNCmE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" https:="" www="" youtube="" com="" embed=""></iframe></td>

</tr>

<tr>

<td><iframe width="560" height="315" src="https://www.youtube.com/embed/hqCnCA-BWng" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></td>

<td><iframe width="560" height="315" src="https://www.youtube.com/embed/T7gwcAiQG3s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></td>

</tr>

<tr>

<td><iframe width="560" height="315" src="https://www.youtube.com/embed/yrvM0ppA6hQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></td>

<td><iframe width="560" height="315" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></td>

</tr>

</tbody>

</table>

</li>

</ol>

</center>

0 Likes