New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video in different resolutions. #87

Open
IvaRoSoft opened this Issue Jan 19, 2019 · 5 comments

Comments

Projects
None yet
2 participants
@IvaRoSoft
Copy link

IvaRoSoft commented Jan 19, 2019

In index.php, you need to remove the video setup code.
This issue is a problem if we upload video in a different resolution.

Responsive video embeded
Aspect ratios can be customized with modifier classes.

Example code:

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
@yuzoolcode

This comment has been minimized.

Copy link
Owner

yuzoolcode commented Jan 20, 2019

The video in the demo (about page) is made responsive using this framework:
http://fitvidsjs.com

Any embed videos use this automatically as it's in Pulsecore.

Do you mean this is not good for different resolutions?

@IvaRoSoft

This comment has been minimized.

Copy link
Author

IvaRoSoft commented Jan 20, 2019

I tried to insert a video based on my original theme

<!--Grid column-->
<div class="col-lg-6 col-md-12">
<p class="h5 text-center mb-4">Watch our "5 min Quick Start" tutorial</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..." allowfullscreen></iframe>
</div>
</div>
<!--/Grid column-->

This code setting has created a blank space above the video that is tall as a video.

<!--Grid column-->
<div class="col-lg-6 col-md-12">
<p class="h5 text-center mb-4">Watch our "5 min Quick Start" tutorial</p>
<div>
<figure><iframe style="width: 500px; height: 281px;" src="..." allowfullscreen="" frameborder="0"></iframe></figure>             
</div>
</div>
<!--/Grid column-->

There is no empty space here.

My theme setting.

<!-- CSS files -->
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap-grid.min.css">-->
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap-reboot.min.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700|Droid+Serif:700">
	
<link rel="stylesheet" href="/template/css/style.css">
<link rel="stylesheet" href="/template/css/responsive.css">
<link rel="stylesheet" href="/pulsecore/asset/css/pulsecore.css">
	
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="/template/css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="/template/css/mdb.min.css">

<!-- My page content -->

<!-- JS files -->
<script src="/template/js/jquery-3.3.1.min.js"></script>
<script src="/template/js/popper.min.js"></script>
<script src="/template/js/bootstrap.min.js"></script>
<script src="/template/js/mdb.min.js"></script>
<script src="/template/js/scripts.js"></script>
 
<!-- pulsecore code -->

<script type="text/javascript" src="/pulsecore/asset/vendor/node_modules/vanilla-fitvids/jquery.fitvids.js"></script>
<script type="text/javascript">
	jQuery(document).ready(
		function() {
			window.setTimeout(
				function() {
					jQuery("video").parent().fitVids();
					jQuery('iframe[src*="youtube"]').parent().fitVids();
				},
			);
		}
	);
</script>
@yuzoolcode

This comment has been minimized.

Copy link
Owner

yuzoolcode commented Jan 21, 2019

Can you share a link?

@IvaRoSoft

This comment has been minimized.

Copy link
Author

IvaRoSoft commented Jan 21, 2019

Uncompleted page.
https://ivaro.sk/
Can I use pictures and videos from Pulse pages?

@yuzoolcode

This comment has been minimized.

Copy link
Owner

yuzoolcode commented Jan 21, 2019

https://ivaro.sk/about video is responsive + working
What's the issue with it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment