I've embedded a lot of videos in my moodle page. Some of them are not loading at all or talkig forever to load. Sorry for posting a stupid question, but I just don't know what to do.
Could there be something in the iframe that is causing problems:
<center>
<div class="video-max-size">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="http://player.vimeo.com/video/116054472?title=0&byline=0&portrait=0" frameborder="0" width="500" height="281"></iframe>
</div>
</div>
</center>
Any tip would be very appreciated!
You might need to install a filter. So when you embed the vimeo code it plays correctly. There is a plug in over here:
https://moodle.org/plugins/view/filter_vimeoembed
Related
I need to create a button to mirror a vimeo video and another one to come back to normal view.
I have been trying using
transform: scaleX(-1)
but its not working
I will appreciate any help Thanks :)
Try adding !important totransform: scaleX(-1). Or,
This Answer might help you but if you want to mirror the Vimeo video then you will have to mirror the whole Vimeo Video iframe.
<iframe id='VimeoVideo' src="https://player.vimeo.com/video/253989945?h=c6db007fe5" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<button onclick='document.getElementById("VimeoVideo").style.transform = "scaleX(-1)"'>Mirror Video</button>
<button onclick='document.getElementById("VimeoVideo").style.transform = "scaleX(1)"'>Back To Normal</button>
You can see an example on the live website here: http://fryert.uk/dp.php
Essentially the page will jump to an iframe once it loads, and I'd rather it didn't do this, could anyone please help?
The site is using Bootstrap V4.1.3.
I originally thought it was only happening on Google Doc embeds, but this seems to be most/all iframes. I've removed the ones that I can, but have to keep these in place.
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<iframe src="https://xd.adobe.com/embed/6f696869-d9ae-4617-5f01-8f5644bcf23d-1958/" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
Expected result is that the page loads without scrolling, but it jumps to the last iframe to load.
I am currently prototyping a website using Foundation 5. I have a HTML5 section which contains an image, header and repeated background. This displays fine locally but as soon as I move the site over to my web server everything in the section tag disappears. It appears for a split second then disappears.
<section id="banner">
<div class="row">
<div class="large-12 columns">
<img class="logo" src="img/logo.png" alt="Logo">
<h1>Heading</h1>
</div>
</div>
</section>
Does anybody know why this is occurring? Seems odd that it only happens on the server.
Thanks in advance!
Please check the Stylesheet (CSS file) has been kept in right folder and CSS path is correct. I have used section tag in my own HTML5 Tutorial website and it is working perfectly. You can visit http://www.html5tutorial4u.com and check the source code of home page. I hope that it will help you a bit.
I have a tumblr with many YouTube video posts. I am wondering how I could use CSS to select the {Video-400} post code and hide the automatic controls that show up on the video.
Here is an example of the automatic controls/visible title I am referring to. They only go away once you play the video: http://jaspingo.tumblr.com/post/105022194129/lol-that-last-one-though.
Also, here are a couple of CSS selectors that might be of use (I don't know the exact differences between them).
#content .video{
}
.video{
}
#content .video iframe{
}
And below is the corresponding HTML.
<div id="content">
<div class="posts">
{block:Posts}
<div class="entry">
{block:Video}
<div class="video">
{Video-400}
</div>
{/block:Video}
</div>
{/block:Posts}
</div>
</div>
Any help would be appreciated. I need to understand the difference between the CSS selectors to fully comprehend the way the code works. And yes, i have tried custom embed code from YouTube, but the same problem exists.
I don't know how Tumblr does their embeds, but you can grab the embed code from YouTube without the controls. A typical embed code looks like:
<iframe width="560" height="315" src="//www.youtube.com/embed/F8Z-ayQkK2A" frameborder="0" allowfullscreen></iframe>
If you want to remove the controls after the fact, you need to add ?controls=0 to the end of the src URL. It becomes:
<iframe width="560" height="315" src="//www.youtube.com/embed/F8Z-ayQkK2A?controls=0" frameborder="0" allowfullscreen></iframe>
To demonstrate, here's the same video using the control parameter outside of an embed code.
The only issue you could run into is with Tumblr using the YouTube API to call the video rather than the embed code. In that case, I'm not sure there's much you can do about it unless you have access to the source and the method for pulling the video into your blog.
I am trying to customize a theme in tumblr so that it embeds videos in their full scale in a blog, but i can't seem to do it...
here are the instances in the code that refer to video
.video-post .video {margin-bottom:1.5em;}
{block:Video}
<div class="content video-post">
<div class="video">{Video-500}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Video}
i tried some basic stuff like removing the -500 and/or adding height="100%"; width="100%" at some places but it does not work that way..
See http://webdesignerwall.com/tutorials/css-elastic-videos or http://fitvidsjs.com/