I am trying to embed a video in the HTML page, however, the iframe is being blocked. I am not an expert with HTML. I can insert the video through object Can you please suggest what could be the issue ?
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button class="closeButton" aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<iframe allowfullscreen="" src="http://player.vimeo.com/video/15731659" frameborder="0" width="880" height="450"></iframe>
</div>
</div>
</div> <!-- /.modal -->
This is the syntax for embed.
<embed src="helloworld.flv">
In case of embedding youtube video
<iframe width="560" height="315" src="//www.youtube.com/embed/0SU8-HJtYYc" frameborder="0" allowfullscreen></iframe>
Don't try iframe, as it will load two pages at a same time. Which may cause slow execution.
Here is the w3schools link : http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_embed_src
Related
I've been trying to figure out how to stop the audio from playing after closing a modal, and nothing seems to work.
My attempt
<script>
var docReadyCodeForModal = setInterval(function() {
if(jQuery) {
clearInterval(docReadyCodeForModal);
$("#myModal").modal('show');
$("#stopClose").click(function(){
$("#myModal").modal('pause');
});
}
}, 100);
</script>
<div aria-hidden="true" class="fade modal" id="myModal" style="display:none">
<div class="modal-lg modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="text-align:center">WELCOME TO THE THUNDERDOME!!!</h5>
<button id="stopClose" class="close" data-dismiss="modal" type="button">×</button></div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item video-not-resize" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/yGwjyodRst4?autoplay=1" title="YouTube video player"></iframe></div>
</div>
</div>
</div>
</div>
Note: video link removed for privacy reasons.
I appreciate any insight into this issue
Script to stop the video from playing when closing modal
Add an id to your iframe and replace #iframe-id with that id.
$(document).ready(function(){
var url = $("#iframe-id").attr('src');
$("#myModal").on('hide.bs.modal', function(){
$("#iframe-id").attr('src', '');
});
$("#myModal").on('show.bs.modal', function(){
$("#iframe-id").attr('src', url);
});
});
You are using Bootstrap. This script listens to the Bootstrap events when hiding and showing the modal.
It removes the url from the iframe src attribute when closing modal and adds the url when the modal its opened.
I have embedded a YouTube video in my website like this:
<h2>Some YouTube video:</h2>
<br>
<div style="text-align:center">
<iframe width="420" height="315" src="http://www.youtube.com/embed/zN7VPRoLlzw" frameborder="0" allowfullscreen></iframe><br><br>
<div id="videotip">
<span class="mini"><br>
<img src="../images/tipp.png" alt="" title="" />
SomeText
<br><br>
</span>
</div>
</div>
When I view the htm file locally in my browser, the YouTube video shows up.
However, when I upload the htm file to my webserver and view it, the video area is blank.
Does anybody see which mistake I might have made?
I used this code and it worked for me:
<h2>Some YouTube video:</h2>
<br>
<div style="text-align:center">
<iframe width="420" height="315" src="https://www.youtube.com/embed/zN7VPRoLlzw?ecver=2" frameborder="0" allowfullscreen></iframe><br><br>
<div id="videotip">
<span class="mini"><br>
<img src="../images/tipp.png" alt="" title="" />
SomeText
<br><br>
</span>
</div>
</div>
as you see I did not change anything but the src link, I right click on the video I selected copy embed code and then replace the link in src with it
Hope this helped (:
i used toggle to hide paragraph through a video but i do not run
<div class="site-slider">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="overlay"></div>
<video id="video_background" preload="auto" autoplay="true" loop="loop" volume="0" width="100%">
<source src="video.mp4" type="video/mp4"> Video not supported
</video>
<div class="slider-caption ">
<div class="hide">
<h2>Marketing Solutions Company</h2>
<p>feeling special</p>
</div>
<a href="#" class="slider-btn" id="polina onclick=" toggleContent()>Pause</a> </a>
</div>
</li>
</ul>
</div>
<!-- /.flexslider -->
</div>
<!-- /.slider -->
</div>
<!-- /.site-slider -->
</div>
how i can show this paragraph when i paused the video because i use display:none
This Line Needs to be:
Pause
There was one closing Tag to much and the `"? was missing behind the onClick Event.
But there are several other invalid HTML Tags too.
The <source> Tag doesn't gets closed for example.
If the code still does'nt work after correcting all HTML Markup please Post your Javascript Code as well.
I try build app by JQM and I use widget Navbar, until now I used by IFrame but it works not good.
My question is, what can I replace instead of IFrame ?
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li>
<a href="#info_tab" class="infoButton ui-btn-active" data-icon="custom"
id="infoMenu"> </a></l`enter code here`i>
<li><a href="#calendar_tab" class="calendarButton"
data-icon="custom" id="calendarMenu"></a></li>
<li><a href="#picture_tab" class="picturesButton" data-icon="custom"
id="pictureMenu"> </a></li>
<li></li>
</ul>
</div>
<!-- End Navigation Bar -->
<!-- iFrames -->
<div id="iFramesDIV">
<div id="info_tab" class="fullScreen ">
</div>
<div id="calendar_tab" class="fullScreen hide">
<iframe id="calendarFrame" src="tab_pickadate/calendar.html"
scrolling="no" frameborder="0" class="fullScreen"></iframe>
</div>
<div id="picture_tab" class="fullScreen hide">
<iframe id="pictureFrame" src="" scrolling="no" frameborder="0"
class="fullScreen"></iframe>
</div>
<div id="buy_tab" class="fullScreen hide">
<iframe id="buyFrame" src="tab_buy/buy.html" frameborder="0"
class="fullScreen"></iframe>
</div>
</div>
<!-- End iFrames -->
</div>
<!-- End Content-->
Please help me :)
To use iframes you will need to include JQM library in the source of Iframe. Try including JQM in "tab_pickadate/calendar.html" path. I also worked with Iframes and JQM together.
I want to embed a youtube video in a bootstrap one page scroll web page, exactly in a carousel video slider.
I have a problem with both Chrome and Firefox (no problem using Safari).
Here is my code:
<section class="videos">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators" style="top:125%">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" style="top:100px;">
<div class="item active">
<div style="text-align:center;">
<iframe width="853" height="480" src="http://www.youtube-nocookie.com/embed/XXXX?rel=0" frameborder="0" allowfullscreen></iframe>
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div style="text-align:center;">
<iframe width="853" height="480" src="http://www.youtube-nocookie.com/embed/XXXX?rel=0" frameborder="0" allowfullscreen></iframe>
<div class="carousel-caption">
</div>
</div>
</div>
</div>
I get two error:
In my console I get:
Blocked a frame with origin "https://www.youtube-nocookie.com" from accessing a frame with origin "http://www.domain.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
Uncaught Error: Error calling method on NPObject.
The videos, appears as black boxes.
What should I do? Thanks
I'd recommend you using an object for the videos you want to embed in your site instead of the iframe. It has a better web browser independent behaviour and works as well with other video providers that enable sharing (dailymotion, vimeo)
<embed width="756" height="461" style="display: block;" src="http://www.youtube.com/v/nlcIKh6sBtc?autohide=1&version=3?autohide=1&version=3&autoplay=1" type="application/x-shockwave-flash" bgcolor="#000000" scale="scale" allowfullscreen="true" salign="tl" allowscriptaccess="never" wmode="opaque">
The above code snippet is an example of how to share a youtube video on a web page with various parameters. Hope this helped.