I am trying to implement you tube embed video using <a href>. it seems not displaying the youtube video and unresponsive. I am not seeing any issue in Jquery or CSS issue. It's working with <iframe src> but not working with <a href> and would like to implement with a tag
No working:
Working:
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" target="_blank" class="youtube-play-icon launch-youtube-modal"></iframe>
A link doesn't seem to have a point unless you want the person to visit another page to view the video. The iframe will display the video without the person leaving the page
Related
On a website I'm working on - https://bi-impro.si - on the front page there is a gif background image you can see when you access the website. That gif is a big file, so I converted it to .mp4, uploaded the video, in elementor chose the video background option, and pasted the link to the video (https://bi-impro.si/wp-content/uploads/2021/12/prstki_mp4.mp4). But the video does not load when I test the website, it just shows the grey area. I added the "background fallback" option of a mentioned gif image, but I want to use the .mp4 image file because it loads faster.
If I see correctly, in page source code there are these lines:
<section class="elementor-section elementor-top-section elementor-element elementor-element-afa0f47 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default elementor-section-items-middle" data-id="afa0f47" data-element_type="section" data-settings="{"background_background":"video","background_video_link":"https:\/\/bi-impro.si\/wp-content\/uploads\/2021\/12\/prstki_mp4.mp4","background_video_start":0,"background_video_end":10,"background_play_on_mobile":"yes","background_play_once":"yes"}">
<div class="elementor-background-video-container">
<video class="elementor-background-video-hosted elementor-html5-video" autoplay muted playsinline></video>
</div>
<div class="elementor-background-overlay"></div>
But I see no problem with that code. I'm not a web programmer, I just use Elementor to build this website.
On the particular page, you want to add the video, you'll notice there's no src attribute, that's why there's no video.....
Temporary fix, add a script tag on the page and add this.... with "xyz.mp4" = video name
document.addEventListener("DOMContentLoaded", () =>{
document.querySelector('#intro-video video').src = "xyz.mp4;
})
Hi I am redesigning my website, I am a novice at JS and CSS, pretty good with HTML 5. I am working on a new responsive web site with a gallery page of images using Lightbox.
The Beta Site and Gallery Page is here:
http://www.sound-enclosures.com/FanAir/index-3.html
I have a Link to " img src= " to the Thumbnail and a "a href= " to the BIG Image.
Problem is only One of Four Images load. It's the First Image on the Page The Blue Picture. This seems to work correctly. The other Images try to link, however they just Hang Up on Loading. I have verified the file names, locations, checked the URL's etc.
I am using Lightbox.min. script before "/head" and bootstrap.min.js at the bottom of my page before "/body"
The Monster Template I am using was furnished with jQuery v1.11.1,
I have read in the Stackoverflow Forums that JQuery 1.8 seems to work better with Lightbox, I have not tried that and would be reluctant to do so as it might mess up other pages.
Can any one take a look and possibly provide some assistance, guidance?
Thank you all in advance.
Scotty
Your images do not load because they are either not on your server or not in the folder images
There is no image named: page4_pic15_Big.jpg that is set as your href:
<a href="images/page4_pic15_Big.jpg" data-title="Heavy Duty Centrifugal Blower" rel="lightbox"> <img src="images/page4_pic15.jpg">
Backward Inclined Blowers<br>
</a>
I have a small problem.
I'm using iframe to insert the banner (with link to the outside website).
<iframe src="http://wifi.tucado.com/ads/001.html" name="i001" target="_blank" frameset frameborder=0 id="i001" scrolling="no"></iframe>
The problem I have is when I click on the banner INSIDE the frame it opens a page INSIDE a frame and I want it to open it in new window (or at least in the parent one).
Is there any way to do it without js or jquery?
If not, what should I do in jquery to make it working? I was trying to find an answer here, but found just very specific questions which don't face my problem directly.
Thanks for any help.
If you can control the source file that is loaded inside the iFrame (http://wifi.tucado.com/ads/001.html), try adding a target="_top" or target="_blank" in the links there.
I have seen loads of questions about images not showing but mine seems to be intermittent, Often the image does not appear on the first page view but will be there following a refresh. I am using a JQuery plugin to pop some text up on an image hover.
Here is an HTML snippet (I actually have three images but have added only one here):
<div class="container_24 spacing-bot">
<ul id="topGallery" class="image-overlay">
<li>
<a href="#Url.Action("Index", "Wedding")">
<img src="#Url.Content("~/content/images/photos/image_one.png")" width="290" height="433" alt="Image One."/>
<div class="caption">
<h3>Heading One</h3>
<p>Pop up comment one.</p>
</div>
</a>
</li>
</ul>
The JQuery code at the botton of the page is:
$("#topGallery")
.ImageOverlay({
border_color: "#000",
overlay_color: "#0545F5",
overlay_origin: "bottom",
overlay_text_color: "#fff",
overlay_speed: 'fast',
overlay_speed_out : 'slow' });
The images display every time on my development machine but not on the production server. I checked the page with Firebug and the images seem to be coming down. Often when I refresh the page or go back to it from somewhere else, the images appear as normal. Sometimes one or two of the images will appear fine but the other wont.
Any assistance would be appreciated - this one is driving me loopy!
Thanks for the suggestion. I removed all the jQuery stuff and the images appeared every time.
I carried on researching this and found someone else who had the same problem. They resolved it by putting the jQuery code into the window.load function and this appears to have fixed my problem too.
I assume there is some code in the constructor for this plugin that sets the visibility of the images and this was failing if the images were not loaded at the time. This probably also explains why it would often work after a refresh or when returning to the page as the images were cached.
Thanks again.
I'm using embed code to do live stream and the embed code like youtube one works perfectly
but some of them I have to use code such as iframe the fullscreen feature doesn't work.
<iframe src="linkhere" width="600" height="450"/>
and I can not toggle the video into fullscreen
will it be any possible way to make it fullscreen if they click on the option?
or will it be any other embed code that similar to iframe to use?
Your problem could be that the flash plugin recognises iframe as your "fullscreen"..
When looking at the youtube embed code, i recognised a function "allowfullscreen" within the iframe definition
make sure you also have this part in your code..
<iframe width="560" height="315" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0" **allowfullscreen**></iframe>
else there might be another option beside an iframe..