curtis594 Posted November 18, 2015 Share Posted November 18, 2015 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
alxfyv Posted November 18, 2015 Share Posted November 18, 2015 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
curtis594 Posted November 18, 2015 Author Share Posted November 18, 2015 Thank you: Site is: http://www.salonu.info/ Right now the iframe is very small to keep from shrinking the rest of the mobile site. Template: Five Link to comment
alxfyv Posted November 19, 2015 Share Posted November 19, 2015 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
curtis594 Posted November 19, 2015 Author Share Posted November 19, 2015 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
drewlander Posted November 20, 2015 Share Posted November 20, 2015 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
drewlander Posted November 20, 2015 Share Posted November 20, 2015 You should probably had started your own thread for this. Its not too late. ;-p Link to comment
alxfyv Posted November 20, 2015 Share Posted November 20, 2015 @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
drewlander Posted November 20, 2015 Share Posted November 20, 2015 I should point out this instruction is to hide the object on mobile devices. To resize I can provide instruction if you show me the site. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.