Jump to content

How to Hide iFrame on Mobile Sites or Resize

Recommended Posts

I'm having a problem which is that I'm embedding Google Virtual Tours on a site using iframe. The code i'm injecting is:


<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sus!4v1447169016528!6m8!1m7!1sxX2fR-HjZPkAAAQfDooE2Q!2m2!1d34.42847716472259!2d-119.7117533932088!3f235.49602003921478!4f-17.12773475960914!5f0.7820865974627469" width="450" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

The issue is that it shows up fine on computers, but it stretches out the screen on mobile sites so the iframe fits the screen width but the content is very small aligned to left.

If there is a way to resize it for mobile, then great! If not, then hiding the block or virtual tour for mobile will be sufficient. I don't know a whole lot about coding, but I have done some css edits.

I have located the block id too: id="block-d38e32a1b7c667b130a0

Any help is much appreciated

Link to comment
  • Replies 8
  • Created
  • Last Reply

It's best when posing a question to give the url to you site. You should also give the template name so other users of your template might benefit from any answer.

Edit your question (click the "edit" link in the line of fine print at the bottom left of the question) to provide the info and add a new comment saying you have.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

If you haven't already, you should put the iframe in an embed block. Code to display third-party content on your site needs an Embed Block. Sqs. Help: Embed Block vs, Code Block - Embed Block.

You need responsive iframe code which you can find at the Pen Responsive Iframe - Base Code at CodePen. This is code I developed for myself for the iframe in my site.

Put the HTML in an Embed Block and the CSS in Design > Custom CSS. In the outer

<div>

change the ID="Iframe-Family-History-Conference" to ID="Iframe-Google-Virtual-Tour". Then in the CSS change #Iframe-Family-History-Conference to #Iframe-Google-Virtual-Tour.

Add a CSS rule:


.responsive-wrapper-wxh-450x450 {  padding-bottom: 100%;}

In the HTML, change responsive-wrapper-wxh-600x480 to responsive-wrapper-wxh-450x450. Then, in the CSS, change max-width: 600px; to max-width: 450px; and change max-height: 100%; to max-height: 450px;

In the CSS in the Pen are some general styles I used to provide padding, margin, border, and box-shadow. You need not use these of course.

Click on the "comments" link at the lower left of the Pen for citations to the authorities explaining, among other things, that you should not put width and height attributes in the iframe opening tag. Rather, you control those, and everything else, with CSS. All that should be in the iframe opening tag is the src= attribute.

If after checking the Pen you need help with the code, add a new comment here. I will be glad to help. But in that event, edit your question and add all the code, both HTML and CSS that you are using. I, and any one else attempting to help, will need to see it.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

I found a solution, even though it would still involve using an iframe. I stumbled upon a site that advised changing the width to "100%" instead of 650px. It seems to work fine. Any other reason I should not use an iframe? I placed the coding into the embed block.

For everyone else's information i placed a virtual tour for a restaurant in santa barbara into my site:

SimplyMarketing360

The code I used was:


<iframe src= "https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sus!4v1443568703048!6m8!1m7!1swFycMFKtPi0AAAQfDnkZEA!2m2!1d34.41713898681908!2d-119.8291491446142!3f228.60300177553688!4f-12.66213483423951!5f0.7820865974627469"
width="100%" height="400" frameborder="no" scrolling="no"></iframe>


Good Luck!

Link to comment

Detecting mobile devices is never 100% as far as I am aware, but if anyone knows a method that is 100% it can be adapted to the solution.

I would just assume the tour should not be visible in browsers if the resolution is less than 600x800, because that is presumably a tablet or mobile device. In that case, insert your vtour in a code block using the html embed tag (not the embed block).


<embed class="v-tour-object" "src="http://www.makevt.com/media/tourmaker/czyaqkfmno/" height=100% width=100%/>

Then use some js in your sites code injection to disable the display if the resolution is too low.


<script>
 if(window.innerWidth <= 800 && window.innerHeight <= 600) {
   document.querySelector('.v-tour-object').style.display = "none"
}
</script>

One "gotcha" here is the script will be ignored if javascript is disabled in the browser. I can tell you how to handle that upon request so I don't confuse you.

thx-d

Link to comment

@leahrockport:

Are you asking about @curtis594's answer or about mine? Let me know which and I will try to help.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.