Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Embed video in blog post

How can I resize and reposition an embedded video in a blog post?

Jina
Excursionist
29 0 4

Hi, 

I am trying to add a youtube video to our blog post. 

I followed the instruction and embedded the video on post with this iframe code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/FRBure6USpE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

From the edit page seemed fine as well. 

Screenshot 2021-09-15 at 12.10.39.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

However, when I see the preview, the video appears very big on the top of the post. 

 

Screenshot 2021-09-15 at 12.11.33.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Is there a way to reduce the size of the video and place it between the text where I'd like to put it? 

 

I appreciate your time and help. 

Thanks,

Jina 

Replies 15 (15)

dmwwebartisan
Shopify Partner
12323 2552 3732

@Jina 

Please share store URL

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Jina
Excursionist
29 0 4

https://alexcarro.com/

 

This is our store URL. 

But you won't see the huge video on the blog post, I removed it since the blog post is not hidden. 

 

Let me know if you need anything else, thank you! 

 

KetanKumar
Shopify Partner
37336 3655 12098

@Jina 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Jina
Excursionist
29 0 4
Hi Ketan,

Thanks for your message.


https://alexcarro.com/



This is our store URL.

But you won't see the huge video on the blog post, I removed it since the
blog post is not hidden.



Let me know if you need anything else, thank you!


dmwwebartisan
Shopify Partner
12323 2552 3732

@Jina 

Please add vedio your blog page and share link 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
KetanKumar
Shopify Partner
37336 3655 12098

@Jina 

can you please sent url blog

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Choong_HueApps
Shopify Partner
163 9 16

Hi Jina,

Can you try removing the "allowfullscreen" at the end of the embed code and see if it works?

Screenshot below for your reference.

Choong_HueApps_0-1631723097870.png

Note: Please mark this as solution if it works.

Blog Articles Filter & Search PRO ➜ Blog Article Tag filters + Blog Article search + Featured Articles for Shopify blog.


Jina
Excursionist
29 0 4
Hi,

I removed the "allowfullscreen" but it still looks the same...
Do you think I should add any other attributes to make it smaller?


Thanks,
Jina
dmwwebartisan
Shopify Partner
12323 2552 3732

@Jina 

This attribute is considered a legacy attribute and redefined as allow="fullscreen".
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Jina
Excursionist
29 0 4
Hello,

Thanks for the answer.
Actually, I am trying to avoid to make it full screen, I'd like it to be
under the text and small.
Maybe removing allowfullscreen doesn't make it smaller?

Let me know, thank you so much.

Jina
Jina
Excursionist
29 0 4

Hello,

Thanks for the answer.
Actually, I am trying to avoid to make it full screen, I'd like it to be
under the text and small.
Maybe removing allowfullscreen doesn't make it smaller?

Let me know, thank you so much.

Jina

Choong_HueApps
Shopify Partner
163 9 16

Hey Jina,

Can you try adding div (see below) at the beginning and ending of your Youtube embed code:

<div style="width:50%!important"><iframe...></iframe></div>

 

50% would be the width you want, you can customize this to be other sizes (by percentage / pixel). I have tested on my development blog and it should work:

Choong_HueApps_1-1631786878646.png

 

Blog Articles Filter & Search PRO ➜ Blog Article Tag filters + Blog Article search + Featured Articles for Shopify blog.


Jina
Excursionist
29 0 4

Hi, 

 

I updated the htmal to 

<div style="width:50%!important"><iframe width="560" height="315" src="https://www.youtube.com/embed/FRBure6USpE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe></div>

 

but I don't really see any changes on the website, so strange!

Do you know the reason why the video is on the top of the post (above the main image), instead of being between paragraphs? 

 

Thank you so much,

Jina 

Choong_HueApps
Shopify Partner
163 9 16

Hmm you might have to contact your theme developer for support. Seems like there's some theme code overwriting what we have. 

Blog Articles Filter & Search PRO ➜ Blog Article Tag filters + Blog Article search + Featured Articles for Shopify blog.


Jina
Excursionist
29 0 4

Alright, thanks for your time and help! 

 

Jina