Jump to content


Photo
- - - - -
Resolved

Responsive Iframe Embeds

video pl_video responsive

  • Please log in to reply
12 replies to this topic

#1 Clifford P

Clifford P

    Advocate

  • Members


  • 378 posts
  • LocationOklahoma
  • Country: Country Flag

Posted 25 October 2012 - 07:51 PM

1.
How do I make an iframe (e.g. video, form, anything in an iframe) embed code responsive? Might there be a shortcode or php code to say "make whatever is in this area responsive"?

2.
(Not 100% related, but a similar question)
I see pl_video at

Please Login or Register to see this Hidden Content

and see examples of Vimeo and YouTube. Are any other providers supported?

Thank you.

#2 Simon_P

Simon_P

    Messer

  • Administrators
  • 8388607 posts
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

Posted 25 October 2012 - 10:31 PM

  • You can control the size of the iframe, but the content is usually remote.
  • pl_video only supports vimeo and youtube.


#3 Clifford P

Clifford P

    Advocate

  • Members


  • 378 posts
  • LocationOklahoma
  • Country: Country Flag

Posted 25 October 2012 - 10:37 PM

How do I control the size of the iframe?

Are you saying I can make the iframe 300x200 but the sourced file could be 500x400 and thus only about half of it is shown and half is cut off?

#4 Simon_P

Simon_P

    Messer

  • Administrators
  • 8388607 posts
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

Posted 25 October 2012 - 11:03 PM

You cant control the sourced file as its remote, you can control the size of the frame, and whether to enable scrollbars.

#5 Clifford P

Clifford P

    Advocate

  • Members


  • 378 posts
  • LocationOklahoma
  • Country: Country Flag

Posted 25 October 2012 - 11:08 PM

i understand. but are you talking about within the iframe's actual embed code (iframe height and width tags) or within pagelines (e.g. a shortcode or targeting a css element or something)? I just want to make sure I'm not missing something. Thanks, Simon.

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 12929 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 26 October 2012 - 09:04 AM

I have no idea regarding iFrames, as the technology is older than me and I have never used them. But you could try adding your iFrame within the PageLines Grid, this may make it responsive but I am unsure.

For example:

Please Login or Register to see this Hidden Content


If that doesn't work, I suggest you ask this question on a web design forum.

#7 Clifford P

Clifford P

    Advocate

  • Members


  • 378 posts
  • LocationOklahoma
  • Country: Country Flag

Posted 26 October 2012 - 01:39 PM

Great idea, but there was no difference in how it worked. I feel like we've considered this in all possible ways for the way the theme is right now so I think you can close this. But I do wish it could resize any iframe proportionately, not just cutting off the width and leaving the height. Thank you.

#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 October 2012 - 03:18 PM

I've tried searching around for responsive iFrame solutions but haven't found any except for jQuery solutions as shown here:

Please Login or Register to see this Hidden Content


  • Clifford P likes this

#9 Clifford P

Clifford P

    Advocate

  • Members


  • 378 posts
  • LocationOklahoma
  • Country: Country Flag

Posted 26 October 2012 - 05:55 PM

similar to

Please Login or Register to see this Hidden Content

-- I thought that was already in PageLines somewhere... no?

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 October 2012 - 05:59 PM

It should be, but I'm not sure why the functionality is misbehaving on your site. Have you already tried deactivating active plugins?

#11 Clifford P

Clifford P

    Advocate

  • Members


  • 378 posts
  • LocationOklahoma
  • Country: Country Flag

Posted 26 October 2012 - 08:13 PM

if fitvids is in PL, then I'm not sure if it's not acting properly. if fitvids is NOT in PL, then everything regarding iframe resizing is fine (it just covers/cuts off when resizing browser window).


Ultimately, here's what I'm trying to do and it's not working... not really related to resizing iframes, but you can see from this code whether or not you think the iframe video embed code should be triggering fitvid functionality or not...
(Maybe @simon can help here)...

On a brand new PageLines install (no plugins enabled other than the Sections), I created a custom section with this as the code (only this section is enabled on drag-and-drop for the page template):

Please Login or Register to see this Hidden Content


If I put the pl_raw version in the content box (WYSIWYG/HTML), it works great.
But if I put the pl_raw or non-pl_raw version in the section (notice I've tried both in the code), neither works.
If I try apply_filters('the_content',____) or the do_shortcode() on pl_raw, it doesn't work (nothing's displayed at all). If I do the non-pl_raw version, it displays messed up or not at all (depending on the variation of code, which you can see in the paste).

Can you please test and/or fix for me. How can I get pl_raw to work (is there a way to tell WP that this and only this should be in the_content area and to override or append to whatever's already in there) or how do I get the non-pl_raw version to work?

Thank you.

#12 Clifford P

Clifford P

    Advocate

  • Members


  • 378 posts
  • LocationOklahoma
  • Country: Country Flag

Posted 27 October 2012 - 09:49 AM

I got it to work - see my comment on

Please Login or Register to see this Hidden Content

here:

Please Login or Register to see this Hidden Content



#13 Danny

Danny

    Is Awesome!

  • Moderators
  • 12929 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 October 2012 - 09:32 AM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, video, pl_video, responsive