I need to view pdf file embed with google drive link and view link in iframe.
I have tried following code:
<iframe src="https://drive.google.com/viewerng/viewer?url=https://library.osu.edu/assets/Documents/SEL/QuickConvertWordPDF.pdf" width="400px" height="300px" />
Advance thanks..
Try this..
<iframe src="https://drive.google.com/viewerng/viewer?
url=https://library.osu.edu/assets/Documents/SEL/QuickConvertWordPDF.pdf?
pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="400px" height="300px" />
This works:
<iframe src="https://drive.google.com/file/d/(your file id)/preview?usp=embed_googleplus" style="border: 0; top: 0; left: 0; width: 640; height: 700; position: absolute;" allowfullscreen></iframe>
You can use like this
<iframe src="https://docs.google.com/file/d/(your file id)/preview"></iframe>
Related
On our site, we use vimeo to display a carousel video of "signature styles" on our homepage. I would like to add a link so that when you click this video, it will direct you the a "signature styles" page.
I am new to using liquid/shopify. I know how to do this in HTML, but it doesn't appear to be working like I thought.
Here is the original code in the "background-video.liquid" file:
<section class="Section" id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="background-video" data-section-settings='{{ section_settings }}'>
<div class="ImageHero {% if section.settings.section_size != 'normal' %}ImageHero--{{ section.settings.section_size }}{% endif %}">
<div class="ImageHero__VideoHolder"></div>
</div>
</section>
And here is some code I tried to replace the above lines with:
<a href="https://www.clarasunwoo.com/search?q=signature+styles&type=product">
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe src="https://vimeo.com/540236561" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div><script src="https://player.vimeo.com/api/player.js"></script>
</a>
All you need to do is create an overlay div that "blocks" the actual iframe from being interacted with via z-index. You can then use JavaScript to handle the click and redirection of the user.
<div style="padding: 56.25% 0 0 0; position: relative">
<iframe
src="https://vimeo.com/540236561"
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
></iframe>
<div class="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99;"></div>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
const overlay = document.querySelector(".overlay");
overlay.onclick = function () {
window.location.href = "https://www.clarasunwoo.com/search?q=signature+styles&type=product";
};
</script>
How can i disable/Hide share option on embedded dailymotion?
Blockquote
https://www.dailymotion.com/embed/video/x5hywa
You can disable it via the query string in the URL in the iframe.
--> "sharing-enable=false"
For instance:
<iframe frameborder="0" width="480" height="270"
src="//www.dailymotion.com/embed/video/x5hywa?sharing-enable=false"
allowfullscreen allow="autoplay"></iframe>
Just put that video in an iFrame and you're fine. There's no overlay.
<iframe src="https://www.dailymotion.com/embed/video/x5hywa" style="border:0px #ffffff none;" name="iFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="600px" allowfullscreen></iframe>
Example: http://jsfiddle.net/ysxf4qt3/
I need help with using an iframe. I want to make it so that if someone clicks on a button then they see my widget <iframe src="domain.com" style="border: 0; width: 100%; height: 250px;"></iframe>
Now I use
<form name="form_reg_full" id="form_reg_full" class="clearfix" method="post" action="domain.com">
But it only redirects to domain.com and it doesn't show my widget
If i understood correctly what you've said this code would be ok for you:
Javascrpit
function show_frame(state)
{
document.getElementById("myiframe").style.display = state;
}
Html
<input type="button" onclick="show_frame('block');" value=" show frame" />
<iframe id="myiframe" style="border: 0; width: 100%;
height:250px;display:none; width: 1020px; height: 320px" src="domain.com">
</iframe>
<div class="LHSChunk" style="width:690px;float:left;">
<div class="DetailComments" runat="server" id="CommentVisible">
<iframe id="iframeComments" runat="server" scrolling="no" frameborder="0" style="width: 700px; height: 400px; visibility: visible;"></iframe>
</div>
</div>
Here I wanted to set my iframe's height as dynamic one based on the page displayed in iframe. For your info I'm using same domain page in iframe.
This helped me,
<script type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight;
}
</script>
in aspx,
<iframe id="iframeComments" runat="server" scrolling="no" frameborder="0" style="width: 690px; visibility: visible;"></iframe>
in aspx.cs,
iframeComments.Attributes.Add("onload", "resizeIframe(this)");
Thanks.
Can we make the following Google Map interactive provided the frame image is showing.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="button" onclick="$('#frame_image').show();" value="Show frame layer">
<input type="button" onclick="$('#frame_image').hide();" value="Hide frame layer">
<br /><br />
<div style="position: absolute; z-index: 1;">
<iframe frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.ca/maps?f=q&source=s_q&hl=en&geocode=&q=55+Avenue+Road,++Toronto,+Ontario+M5R+3L2+Canada&aq=&sll=43.656877,-79.32085&sspn=0.852471,2.113495&ie=UTF8&hq=&hnear=55+Avenue+Rd,+Toronto,+Ontario+M5R+1C6&t=m&z=14&ll=43.67111,-79.395217&output=embed&iwloc=near" ></iframe> <br />
<small>View Larger Map</small>
</div>
<div style="position: absolute; color:red; z-index: 2" id="frame_image">
<img src="http://torontoclinic.awkwardhosting.com/images/frame.gif" />
</div>
Code is also on the following link:
http://jsfiddle.net/pPrZV/
Please let me know if there is any other way via Google Maps API etc.
Thanks
Just apply this style to <iframe> of the google map
<iframe style="border-radius:250px" frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no"...
Working jsFiddle here