Support Forum

Best way to embed liveleak video for responsiveness?

AB Andy B
Andy B
Member
Member since Oct 2013
27 posts
Nov 11, 2013 · 4:05 pm · Edited

Embedding liveleak video works OK – using an embed code pasted into HTML view gives the desired effort for PC. But, using a mobile the embedded video appears off the screen which is not nice. (tested using Iphone/ipad – note: simple:press forum in question is configured to use responsive theme for mobile/tablets).

If I set the width of embedded video to 100% then this works for mobile/tablets however on PC it gives ghastly bars either side of the video. 

I was thinking to use max width css styling but this whole procedure is becoming quite complicated for simply posting a video.

 Any tips on how to do this would be appreciated. 

 

I was trying to give an example using following embed code but I don’t have permissions to embed an iframe.

<iframe src="http://www.liveleak.com/ll_embed?f=848cbd78cb89" height="360" width="640" allowfullscreen="" frameborder="0"></iframe>

 

13 Answers

New Answer
YS Yellow Swordfish
Yellow Swordfish
Member
Member since Nov 2008
16,437 posts
Nov 11, 2013 · 5:19 pm

I am going to have to consult on this one. I believe the Wp theme may play more of a part in this than meets the eye and specifying a definite width for the iframe is going to force that width no matter how much real estate you have..

So – anyone with any advice?

AB Andy B
Andy B
Member
Member since Oct 2013
27 posts
Nov 12, 2013 · 3:38 pm

btw, it seems to be the same for YouTube videos also

MP Mr Papa
Mr Papa
Member
Member since Dec 2006
19,448 posts
Nov 12, 2013 · 10:32 pm

odd – not normal for wp…. agree it sounds like something in the wp theme… but cant tell without seeing… do you have an example you can provide a link to?

also, jetpack is known to sometimes mess up video width – but not sure about just with mobile (even stranger)..

AB Andy B
Andy B
Member
Member since Oct 2013
27 posts
Nov 13, 2013 · 8:10 am

Hi,

I have created a special test forum and added a few examples of both liveleak and youtube and given examples of the way i have embedded it and also taken some screenshots showing the way it looks on an iphone (ios7 – safari). You can check with mobile and/or PC if you like to see what I mean:

http://body-builderz.com/forum/test-forum

I am using a wp theme by ‘yootheme’ which is built on warp framework.

I also notice a few other observations with respect to embedding html behaviour but perhaps I shouldn’t go into this right now otherwise it might confuse things.

BR Brandon
Brandon
Member
Member since May 2010
864 posts
Nov 13, 2013 · 9:21 pm

It looks like what you are going to have to do is edit the Unified theme and add some CSS for width for the smaller screen sizes.

You could try setting the CSS width to 100% for mobile devices only. Something like

.spPostContent iframe {
    width: 100%;
}
You may have to set the width differently for the different screen sizes or ‘breakpoints’ Here’s an article that explains them and you will see them in the Unified CSS file.
http://www.1stwebdesigner.com/design/overview-of-breakpoints-in-responsive-web-design/
AB Andy B
Andy B
Member
Member since Oct 2013
27 posts
Nov 14, 2013 · 4:41 pm

Many thanks all, nice idea with css!

I used a custom css wp plugin and added to it:

/* Simplepress mobile iframe width 100% for liveleak and youtube videos etc */

@media only screen and (max-width: 768px){
.spPostContent iframe { width: 100%; }
}

This solves a few problems

 

 

KV kvr28
kvr28
Member
Member since Mar 2014
804 posts
Apr 24, 2014 · 10:59 am

Brandon, any idea how I would fix this? I have these in my wp theme css to force the videos to 16×9, they keep showing as 4×3, I also added the code above to keep the videos on mobile from overlapping

/* Simplepress mobile iframe width 100% for liveleak and youtube videos etc */
@media only screen and (max-width: 768px){
.spPostContent iframe { width: 100%; }
}

.spPostContent iframe {
max-width: 640px !important;
max-height: 360px !important;
}

it looks fine on landscape, but when holding vertical, the youtube box is quite large, it’s not that big of a deal, just wondered if you had any suggestions

YS Yellow Swordfish
Yellow Swordfish
Member
Member since Nov 2008
16,437 posts
Apr 24, 2014 · 12:24 pm

I will let Brandon reply as he knows much more about this stuff than I do but isn’t the real problem trying to work out why the format is wrong in the first place?

KV kvr28
kvr28
Member
Member since Mar 2014
804 posts
Apr 24, 2014 · 12:29 pm

Yellow Swordfish said
I will let Brandon reply as he knows much more about this stuff than I do but isn’t the real problem trying to work out why the format is wrong in the first place?

good point yellow, I just thought that was normal for simplepress

YS Yellow Swordfish
Yellow Swordfish
Member
Member since Nov 2008
16,437 posts
Apr 24, 2014 · 12:32 pm

Not at all. More likely to be whatever method you are using to embed them and whatever third party CSS is at play….

KV kvr28
kvr28
Member
Member since Mar 2014
804 posts
Apr 24, 2014 · 12:43 pm

I’m going to delete the css code and all plugins on staging server and see if it fixes it, if not, I’ll  switch themes, will report back