Search the Community
Showing results for tags 'embed'.
Found 14 results
-
Hi anyone, I was looking for a possibility to link to a .html file wich defines everythin what I want to put into the <head> tags. Just like linking to a stylesheet. Just to avoid adaptation in each file, when something changes in the head. If I could link to a file that describes the "head" I would only need to chang it in one file. Basically the same idea as for stylesheets actually. Does anybody have a good practice here?
-
Hello, I have this carousel that rotates with still images, my goal is to embed a video link with a still image preview overtop of it, so when they click the image they can watch the embedded video right where the image is, and from there go to the video functions, full screen etc... Can someone please advise if I need to consider an iframe that pops up overtop upon clicking or if it is 'doable' right there in the image sized frame. I am more of an editor, definitely not a code aficionado, so please bare with me and help guide me to my solution, thanks in advance for all of your help! code: <div class="owl-carousel carousel-project" data-items="1" data-md-items="1" data-dots="true" data-nav="true" data-stage-padding="15" data-md-stage-padding="150" data-xl-stage-padding="200" data-xxl-stage-padding="350" data-loop="true" data-autoplay="true" data-center="true" data-margin="30" data-xl-margin="0" data-xxl-margin="0" data-mouse-drag="false" data-nav-text="["prev", "next"]"> <div class="box-project"> <div class="box-project-image"><img src="images//project-1-632x375.jpg" alt="" width="632" height="375"/> </div> <div class="box-project-body"> <div class="box-project-inner"> <h5 class="box-project-title"><a href="#">Jane Williams</a></h5> <div class="box-project-subtitle">music videography</div> </div> <div class="box-project-social"><span class="icon icon-lg linearicons-share2" data-project-toggle></span> <ul class="list-inline-sm box-project-icon-list"> <li><a class="icon-sm mdi mdi-facebook novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-twitter novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-google-plus novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-vimeo novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-youtube-play novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-pinterest novi-icon icon" href="#"></a></li> </ul> </div> </div> </div> <div class="box-project"> <div class="box-project-image"><img src="images//project-2-632x375.jpg" alt="" width="632" height="375"/> </div> <div class="box-project-body"> <div class="box-project-inner"> <h5 class="box-project-title"><a href="#">Type One Ltd.</a></h5> <div class="box-project-subtitle">commercial Videography</div> </div> <div class="box-project-social"><span class="icon icon-lg linearicons-share2" data-project-toggle></span> <ul class="list-inline-sm box-project-icon-list"> <li><a class="icon-sm mdi mdi-facebook novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-twitter novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-google-plus novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-vimeo novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-youtube-play novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-pinterest novi-icon icon" href="#"></a></li> </ul> </div> </div> </div> <div class="box-project"> <div class="box-project-image"><img src="images//project-3-632x375.jpg" alt="" width="632" height="375"/> </div> <div class="box-project-body"> <div class="box-project-inner"> <h5 class="box-project-title"><a href="#">Agnivex Studio</a></h5> <div class="box-project-subtitle">Fine art photography</div> </div> <div class="box-project-social"><span class="icon icon-lg linearicons-share2" data-project-toggle></span> <ul class="list-inline-sm box-project-icon-list"> <li><a class="icon-sm mdi mdi-facebook novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-twitter novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-google-plus novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-vimeo novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-youtube-play novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-pinterest novi-icon icon" href="#"></a></li> </ul> </div> </div> </div> </div> </section> -
I am working with an HTML5 template that supports youtube video backgrounds in a DIV. When I scale the browser window to see how the responsivnes behaves, I notice that the videos crop left/right, top/bottom, depending on the aspect ratio of the DIV. For my purposes, I would need the videos only crop on the right and top only, so that the bottom left is always visible. As I am not a pro I have been doing a lot of trial and error on this, but cannot get it working. I actually need to have two classes available. One where the video scales from the bottom left and one where it scales from the top right corner. I don't quite understand if I need to create two new classes for "videobg" AND "youtube-background" respectively? That would be "videobg-bl, videobg-tr, youtube-background-bl, youtube-background-tr". Or is just one of those classes responsible for the scaling? This is the HTML snippet I use in the template: <div class="imageblock__content videobg col-lg-6 col-md-4 pos-right" data-overlay="0"> <div class="youtube-background" data-video-url="https://www.youtube.com/watch?v=ekthcIHDt3I"></div> <div class="background-image-holder"> <img alt="image" src="img/dancer-1A.png"> </div> </div> and these are the CSS classes for videobg and youtube-background: .videobg { background: #252525; position: relative; overflow: hidden; } .videobg .container, .videobg .background-image-holder { opacity: 0; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; } .videobg .background-image-holder { opacity: 0 !important; } .videobg.video-active .container { opacity: 1; } .videobg.video-active .loading-indicator { opacity: 0; visibility: hidden; } .videobg video { object-fit: cover; height: 100%; min-width: 100%; position: absolute; top: 0; z-index: 0 !important; left: 0; } @media all and (max-width: 1024px) { .videobg .background-image-holder, .videobg .container { opacity: 1 !important; } .videobg .loading-indicator { display: none; } .videobg video { display: none; } } .youtube-background { position: absolute; height: 100%; width: 100%; top: 0; z-index: 0 !important; } .youtube-background .mb_YTPBar { opacity: 0; height: 0; visibility: hidden; } @media all and (max-width: 1024px) { .youtube-background { display: none; } } Also, the template is using ytplayer.min.js for the youtube backgrounds. Unfortunately, the player shows branding watermarked elements during the first 2-3 seconds of the clip, that I have no idea how to get rid of. I also have all my clips on vimeo, so it would be so much more convenient to be able to use vimeo backgrounds instead. Is there a simple way to do this, without breaking the above CSS? -
BACKGROUND: Recently I learned how to embed directly a Matomo widget into my website. Although there are several ways to make this happen, I am only able to achieve two of them at this time: one, gives all autonomous users access to all Matomo's reporting widgets and a large number of reporting methods; the other, exposes the superuser's authorization token that would leave a disastrous breach in database security. DILEMMA: Although I am able to retrieve the widget via CURL in an invisible PHP file, and consequently embed the widget's contents via the src attribute of an iframe, I am not able to do so with the same rich formatting that can be achieved when the same HTTP request is placed directly into the src attribute of the iframe. Either cURL is stripping away valuable information or the Browser is unable to process the information provided in the format provided. QUESTION: What must I do in order to get cURL to behave in a manner that produces information compatible with an ordinary web-browser? Roddy
-
hey w3s... so i have this code: <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h2 class="font-weight-bold text-center">WORK</h2> <div class="border"></div> <br /> </div> </div> </div> <div class="container main_wrapper"> <section> <div class="container"> <div class="row" id="work-grid"> <?php $query_1 = "SELECT * FROM admvideo ORDER BY video_id DESC"; $result_1 = mysqli_query($dblink, $query_1) or die(mysqli_error($dblink)); if( mysqli_num_rows($result_1) > 0 ) { while( $row_1 = mysqli_fetch_array($result_1) ) { $video_id = $row_1['video_id']; $video_title = $row_1['video_title']; $video_link = $row_1['video_link']; $video_director = $row_1['video_director']; $video_text = $row_1['video_text']; ?> <div class="col-sm-4 col-xs-12 work_panels"> <div class="panel panel-default Panel_ModalVideoID-<?php echo $video_id; ?>"> <div class="panel-thumbnail"> <a href="#" title="Video" class="thumb"> <img src="https://img.youtube.com/vi/<?php echo $video_link; ?>/0.jpg" class="img-responsive img-rounded" data-toggle="modal" data-target=".modalVideo"> </a> </div> <div class="panel-body"> <p class="work-name"><?php echo $video_director; ?></p> <p class="work-video-text"><?php echo $video_text; ?></p> </div> </div> </div> <?php } } else { // hvis der ikke er EN række i udtrækket, vises en fejlbesked echo 'Ingen videoer at vise i nu.'; } ?> </div> </div> </section> <div class="modal fade customModal_1 modalVideo" tabindex="-1" role="dialog" aria-labelledby="modalVideo_LabelledBy" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title customModal_2">Video Title 1</h3> <button class="close" type="button" data-dismiss="modal">×</button> </div> <div class="modal-body"></div> <div class="modal-footer"> <h4 class="customModal_3">Video Title 2</h4> <p class="customModal_4"> Video in here. </p> <!--<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>--> </div> </div> </div> </div><!-- //.modal-Youtube_1 --> </div> <script> $('[class^=Panel_ModalVideoID-]').click(function(event) { event.preventDefault(); // Step 1 - The Variables //----------------------------------------------- var e = $(this); // e = event of the function happening via class/id "class^=Panel_ModalVideoID-*" (working?) var modal = $('.customModal_1'); var modalTitle = $('.customModal_2'); var videoTitle = $('.customModal_3'); var videoEmbed = $('.customModal_4'); var modal_body = $('.modal-body'); var INSERTDATA_modalTitle; $('a.thumb').click(function() { INSERTDATA_modalTitle = $(this).Attr( 'title' ); }); //var INSERTDATA_modalTitle = e.$('a.thumb').Attr("title"); // working? // Step 2 - Clear different areas //----------------------------------------------- modal_body.empty(); // empty area // Step 3 - insert data into different areas //----------------------------------------------- $(modalTitle).html(INSERTDATA_modalTitle); // Step 4 - show the modal //----------------------------------------------- $(".customModal_1").modal({ show: true; }); }); </script> Currently i'm using bootstrap 4 and trying to make a modal appear. So far it is working BUT i am trying to edit the following inside of the modal: Modal title, and the 2 <p> items inside modal-footer for youtube embed and youtube title etc. All of the replacements at different areas should come from the "while loop" at the upper of the page coding with php. Can you help me somehow? Not sure what to do with js/jquery really, a little bit of a newbie... even after years, i still dont get much of it :/ Hoping you guys can help me out a bit. If more information is needed, please ask. Using jQuery 3.2.1, included ALL of the bootstrap 4 bundle etc, so i know that is not the problem here. Maybe it is the way i am using my JS/jQuery code. Thanks a lot. And ohh... the title should be from the "a.thumb -> title attribute", saying video... will edit it later with php so that it will be dynamic. Hope you can help. Thanks!
-
Help me Obi-Wan you are my only hope. I am trying to and an embedded YouTube video into an email that I am sending out to clients. The issue I have is that when the video doesnt render (pretty much all email clients) I cannot get the background image to display. So far I have tried <iframe>, <object> and now I am trying <embed>. From what I understand Gmail doesnt support iframe or object tags, which has left me attempting to use embed. I am aware that YouTube videos will not appear in the majority of email clients, which is why I am trying to specify that a fall back image appears, currently it is just showing a blank space where the image should be! I have attached the code I have been using and would appreciate any help I can get! aza video.html
-
Good Day to All. I have a website to display my artwork and poetry. In the poetry section there is the main page with links to other pages and also an anthology which lists my poems by title, the titles are linked to a page to view the poems in their entirety. When you click the link to any poem, that page also displays the anthology so that you can easily navigate to the next poem that interests you without having to return to the main poetry page. The problem I find myself with is that when I want to add a new poem to the anthology I need to edit every page that contains that list. Not something I am interested in doing. I created the website from scratch several years ago and am just a novice, nothing fancy. I have searched the internet for answers but have yet to find what I am looking for. I would like to create the Anthology as a list of links on a separate page/file that can be referenced/sourced in each poetry page that would display the list. In this manner I only have to edit one page and those changes will reflect on all the associated pages. This is the navigation portion of the code that reflects the links desired; <div id="nav"> <ul> <li><a href="../index.html">Home Page</a></li> <li><a href="../aboutartist.html">About the Artist</a></li> <li><a href="../all-art.html">Gallery</a></li> </ul> <h2>Anthology</h2> <ul> <li><a href="achildcries.html">A Child Cries</a></li> <li><a href="addedupon.html">Added Upon</a></li> <li><a href="brokenflowers.html">Broken Flowers</a></li> <li><a href="deadlovers.html">Dead Lovers</a></li> <li><a href="dreamchaser.html">Dream Chaser</a></li> <li><a href="ebb.html">Ebb</a></li> <li><a href="eyes.html">Eyes</a></li> <li><a href="inthedark.html">In The Dark Recesses of Our Soul</a></li> <li><a href="luna.html">Luna</a></li> <li><a href="myancientpictographs.html">My Ancient Pictographs</a></li> <li><a href="raindrop.html">Rain Drop on the Back Porch Railing</a></li> <li><a href="restlessthenight.html">Restless The Night</a></li> <li><a href="summer.html">Summer</a></li> <li><a href="tameroftheuniverse.html">Tamer of the Universe</a></li> <li><a href="thankyouchild.html">Thank You Child</a></li> <li><a href="theburning.html">The Burning</a></li> <li><a href="unopenedbooks.html">Unopened Books</a></li> <li><a href="whereangelstread.html">Where Angels Tread</a></li> </ul> </div> Ideally, all the links below <h2>Anthology</h2> would be referenced/sourced from a different page/file. My difficulty is two fold. 1. How to source the link. I have tried javascript (which i do not know); <script src="../Poetry List/poetrylist.js"></script> This was the closest thing I could find that might get me where I want. 2. how to create/format the source page that contains the information. currently it is saved as .js Here is the poetry page of the website;http://sagebrushart.com/Poetry.html Any and all help would be greatly appreciated.
-
This is my embed code but can't get it to work. <div style='text-align:center'><script type='text/javascript' src=‘http://pshared.5min.com/Scripts/PlayerSeed.js?sid=281&width=480&height=401&playList=517393213'></script><br/></div> When I place it in the body tag, nothing even shows up. Seems to ignore it completely. What am I doing wrong?
-
Hello friends, I have some .epub books that I want to display on my webpage just like embeding some reader and put that epub file in the source. But don't know how to and what type of reader I should use. The epub reader should fetch the .epub files from my server. Please help me. Its very urgent. Thanks in advance! -Vivek
-
Hello all, I was experimenting with the <object> tag, putting one webpage inside another HTML document. I found that if I put a PDF in it appear just under 70% of its original size, .....even if I specify the height and width. <object src="folder/thumbnail.pdf" type="application/pdf" width="100" height="100"/> But if I put a PNG (of the same image, size unaltered) in another HTML document and call that in, it appears at 100%. <object data="page2.html" type="text/html"> alt : <a href="page2.html">page2.html</a> </object> ....WHY is this?
-
Hi all, I am a beginner in HTML5. I need to play a video using my custom mediaplayer which is residing on the client-side. Mediaplayer is written CPP and Qt. Is there any way I can invoke the mediaplayer from the html 5 page? If object or embed tag is to be used, how do I specify the external application on client-side? How to control the function in javascript? (Video tag support is not provided on my target machine)Please help... -
Hi I need to reference a swf file from another website that I am representing but I could not get the swf on their page to properly show up in mine. I am embeding in xml and my code is:<embed type="application/x-shockwave-flash" src="http://www.citizensoldiersupport.org/media/home-gallery.swf" width="574" height="359" id="homeFlashContent" name="homeFlashContent" quality="high" menu="false" scale="noscale" salign="lt" wmode="transparent"> </embed>Any idea or thoughts of whats wrong?Thanks in advance
-
Ok. Sorry that the title was a bit confusing, but this is what I need. I have the Konami code currently working on my website. Here is what I want to happen: If you get the code wrong: I want an alert that states you got it wrong. If you get it right, a youtube video opens in lightbox or fancybox. If this is not possible, how do I simply direct the user to another page on my site? This is my site currently: http://webdesign.miad.edu/stimm/ This is my javascript/jquery code: <script type="text/javascript" src="scripts/jquery.js"></script><script type="text/javascript" src="scripts/konami-JS.js"></script> <script type="text/javascript">konami = new Konami()konami.code = function() {alert("You have entered the KONAMI CODE! You now have 30 lives. Kinda.")} konami.load()</script> The Konami code works (up, up, down, down, left, right, left, right, b, a, enter). It just doesn't do what I want yet. -
Hi all,Forgive me if this is the worng place for this.I have a webserver running a stream of audio files in a folder on my server on port 8080I can access the streaming audio using a media player like vlc. The server has http, and php.What I want to do is have a visual player object, where if you visited my site you could listen into my stream by clicking on the embeded media player. I Tried the examples, from http://www.w3schools...html_sounds.aspbut I dont know how to use the code to specify the ip and port where I am streaming from. <embed height="100" width="100" src="130.111.192.142:8080" /><object height="100" width="100" data="130.111.192.142:8080"></object> Things like that, just dont work. What am i doing wrong? How can I embed a way to play the audio I am already streaming on my server?
