ଏମ୍ବେଡ୍ କରନ୍ତୁ |
ପିତାମାତାଙ୍କ ମୋଟେଇ ଉପରେ ଆଧାର କରି ପ୍ରତିକ୍ରିୟାଶୀଳ ଭିଡିଓ କିମ୍ବା ସ୍ଲାଇଡ୍ ଶୋ ଏମ୍ବେଡ୍ ସୃଷ୍ଟି କରନ୍ତୁ, ଯେକ any ଣସି ଉପକରଣରେ ମାପକାଠି କରୁଥିବା ଏକ ଅନ୍ତର୍ନିହିତ ଅନୁପାତ ସୃଷ୍ଟି କରି |
ବିଷୟରେ
ନିୟମ ସିଧାସଳଖ <iframe>
,, ଏବଂ ଉପାଦାନଗୁଡ଼ିକ <embed>
ପାଇଁ ପ୍ରୟୋଗ କରାଯାଏ; ବ other କଳ୍ପିକ ଭାବରେ ଏକ ସ୍ପଷ୍ଟ ବଂଶଧର ଶ୍ରେଣୀ ବ୍ୟବହାର କର ଯେତେବେଳେ ତୁମେ ଅନ୍ୟ ଗୁଣ ପାଇଁ ଷ୍ଟାଇଲିଂ ସହିତ ମେଳ କରିବାକୁ ଚାହୁଁଛ |<video>
<object>
.embed-responsive-item
ପ୍ରୋ-ଟିପ୍! frameborder="0"
ଆମେ ତୁମ ପାଇଁ ଏହାକୁ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଆବଶ୍ୟକ ନାହିଁ <iframe>
ଯେହେତୁ ଆମେ ତୁମ ପାଇଁ ତାହା ନବଲିଖନ କରୁ |
ଉଦାହରଣ |
<iframe>
ଏକ ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନରେ .embed-responsive
ଏବଂ ଏକ ଅନୁପାତ ଅନୁପାତରେ ଯେକ any ଣସି ଏମ୍ବେଡ୍ ଗୁଡ଼ାଇ ରଖନ୍ତୁ | ଏହା .embed-responsive-item
କଠୋର ଆବଶ୍ୟକ ନୁହେଁ, କିନ୍ତୁ ଆମେ ଏହାକୁ ଉତ୍ସାହିତ କରୁ |
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
ଅନୁପାତ ଅନୁପାତ
ଆସେକ୍ଟ ଅନୁପାତଗୁଡିକ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ସହିତ କଷ୍ଟମାଇଜ୍ ହୋଇପାରିବ | ଡିଫଲ୍ଟ ଭାବରେ ନିମ୍ନଲିଖିତ ଅନୁପାତ ଶ୍ରେଣୀଗୁଡ଼ିକ ପ୍ରଦାନ କରାଯାଇଛି:
<!-- 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>
ଭିତରେ _variables.scss
, ଆପଣ ବ୍ୟବହାର କରିବାକୁ ଚାହୁଁଥିବା ଦିଗ ଅନୁପାତକୁ ପରିବର୍ତ୍ତନ କରିପାରିବେ | $embed-responsive-aspect-ratios
ତାଲିକାର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି :
$embed-responsive-aspect-ratios: (
(21 9),
(16 9),
(4 3),
(1 1)
) !default;