Sign in to follow this  
Followers 0

DMS 2 How can I have a responsive youtube-embed inside a modal?

5 posts in this topic


When I insert a youtube-embed inside a modal, it won't work. I tried to have:


 <div class=" fitvids">
        <iframe  src="//" frameborder="0"  allowfullscreen></iframe>

But that won't work on mobile either.

Thank you!


Share this post

Link to post
Share on other sites



Why won't it work ? I have just added the following to a modal shortcode and it works, but the modal body classes needs its height via CSS adjusting.


[pl_modal title="Title" type="btn" colortype="info" label="Click Me!"]<div class=" fitvids"><iframe src="//" frameborder="0" allowfullscreen></iframe></div>[/pl_modal]

Share this post

Link to post
Share on other sites

Yeah, I mentioned above you have to change the height of the modal via CSS.

Share this post

Link to post
Share on other sites

Ahh, apologies. 
It would of course be better if it would work without such customization, since it means either tons of media queries or black bars in several screen sizes. But I'd assume this is the default bootstrap modal as it is. 

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0

  • Similar Content

    • Can I remove the play button that appears on canvas area background images on mobile?
      By crose+
      I am using the Canvas Area section at the top of my site. I have a video playing in the background, which works really well on desktop. But on mobile video doesn't play without user interaction, so I have a static image in place as an alternate image. However when viewed on a mobile device there is now a play button over the static image that does nothing. This didn't use to happen so I imaging it is due to an upgrade. But this is really bad UX. Is there a way to remove it?
      Here is the site:
      Thanks in advance.
    • [Solved] iFrame Issues
      By Ryan Logan+
      Hello.  Just upgraded to the latest version of DMS and iFrame elements are not displaying or functioning properly.  See here.
      I've tried switching from Textbox to Nextbox (default settings) and there is no change.
      Thank you,
    • Embed full width street view
      By zetanet+
      Look the Google tour iframe in this page:
      Is it possible to see this iframe not boxed (as you see) but in full width?
    • Video Background
      By Matt C.+
      So I used to use the Video Background extension that was offered here on pagelines, but until recently it continued to function.  Yesterday however it ceased to work and since it has been removed and no longer supported I've been forced to find a new way to show the youtube video that used to be on my background.
      I know that there is the option to upload videos for background, needing both an mp4 and ogv version.  However, since this is a youtube video I don't have any source files to upload.
      I have since turned to using the mb.YTPlayer wordpress plugin.  It seems to be working just fine on its part, as you can see a sliver of it playing just below my footer.  My issue though it that it doesn't show up behind my main body content.  Now it was my understanding that the backgrounds were defaulted to transparent in DMS2 and that this shouldn't be happening.  I've tried several CSS transparency codes to no avail, so my question is how am I able to get the video that is showing up right beneath the footer in other areas?  Either on a section by section basis or for the entire body?
    • Powerloop layout w/ video
      By clj182+
      I'm having trouble getting my Powerloop layout the way that I want...
      I'd like to have the same layout as the question below but instead of an image I'm using video.
      I have my media shortcode above everything but the title is still above it in my page and when I inspect it.
      My settings:
      [powerloop_title class="plHtxt" align="center"] 
      [powerloop_content class="plHContent" align="left"]
      [powerloop_author class="plHauthor" align="left"] | [powerloop_date format="F j, Y"]
      Another problem I am having is that I cant create space between the video and the content..If i add padding or an margin to my content class it adds that spacing to the video as well.
      Any ideas on how I can fix this?